From eab495ffbdddf6492c2ee85f53915cd062632691 Mon Sep 17 00:00:00 2001
From: freeCodeCamp's Camper Bot <camperbot@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:49:25 -0500
Subject: [PATCH] chore(i18n,learn): processed translations (#55442)

---
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 ...-meaning-by-using-descriptive-link-text.md |   2 +-
 ...adjust-the-hover-state-of-an-anchor-tag.md |   8 +-
 .../decrease-the-opacity-of-an-element.md     |   2 +-
 ...st-an-anchor-element-within-a-paragraph.md |   6 +-
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../61408f155e798909b6908712.md               |   2 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   4 +-
 .../5ddbd81294d8ddc1510a8e56.md               |   4 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../64388945b59341057e955fbb.md               |  12 +-
 .../643c0ab6779047014ca69b4f.md               |  12 +-
 .../643c14c8027369027334e802.md               |   8 +-
 .../643c337176a83407d0cd915c.md               |  10 +-
 .../643c359312d030093352fe41.md               |  12 +-
 .../643c565936a10109b3f59326.md               |   8 +-
 .../643c56790fac5409eb5ec6f9.md               |   4 +-
 .../643c8d9a73965c0a26d7f634.md               |   6 +-
 .../643c90830bbeb40ab15148a6.md               |  14 +--
 .../643c95001ff61f0b3c39ce71.md               |   4 +-
 .../643e9ee64efc77016fa3397c.md               |   4 +-
 .../6444062a33ab4c03d0c2e9f5.md               |   8 +-
 .../64440a50d076c204051f2cc0.md               |  24 ++--
 .../644fb1d7f0257702a0c935cf.md               |  10 +-
 .../645763874fd6d901c273db29.md               |   8 +-
 .../645f06144bc0dc0143a5a3a2.md               |  10 +-
 .../645f7231271ab1012bc659b8.md               |   6 +-
 .../645f764c37de33015ded1273.md               |  14 +--
 .../645f7879ebbdb201892e55e1.md               |  14 +--
 .../645f8615fa144d01c476b22c.md               |  18 +--
 .../646474a88d0d4a016f895ba8.md               |  10 +-
 .../64648c3254e52901e36e7703.md               |  10 +-
 .../646494e11d0cab03caee204c.md               |  10 +-
 .../64649b108df035051cb2ba2d.md               |  10 +-
 .../657386f11fb8265660bfac75.md               |  14 +--
 .../65738cc6cba1825b14806b3d.md               |  12 +-
 .../65739e21dbdf776ccfbf2df5.md               |  12 +-
 .../6576076879130f6cf7426e82.md               |  10 +-
 .../65760954561c726e832a0cc8.md               |  18 +--
 .../65760ce115eb06716baeb361.md               |  20 +--
 .../65760de70283687288fe70cf.md               |  20 +--
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../660f415b76859a2736771607.md               |   4 +-
 .../66458f0a05df478aa627629e.md               |  18 +--
 .../664599653fcd6e97104f9261.md               |  14 +--
 .../664ed9344ba3495e1f67f8ea.md               |  14 +--
 .../664ed97c55a99e5ffab759dc.md               |  22 ++--
 .../665732da4815b70bb083915e.md               |  18 +--
 .../665732e62eb8b30c249b5c2c.md               |   6 +-
 .../66643c93e05093c728abdbe9.md               |  16 +--
 .../66643c9a9e0ad1c787f5fe2b.md               |   8 +-
 .../63c620161fc2b49ac340ffc4.md               |  12 +-
 .../63cf7e324c1831f8d936b3ae.md               |  10 +-
 .../63cf812bb8ecd4f9cf749b8f.md               |   6 +-
 .../63cf83fdbb51d9fa54654ae6.md               |   6 +-
 .../63cf91b0ff6e9300ead140cc.md               |   8 +-
 .../63cf920228531a0145abd0b3.md               |   8 +-
 .../63cf93472de77d01bf8474bf.md               |  16 +--
 .../63d120a05ee93f38353b84c0.md               |   8 +-
 .../63d1214a0ac7a9389793269b.md               |  30 ++---
 .../63d128eaedcc773d2ded2128.md               |  30 ++---
 .../63e0334b7a24bd3c96aca4de.md               |   8 +-
 .../63e036373fc9173d284e165a.md               |  10 +-
 .../63e03b86008bbb3e1c3de846.md               |   6 +-
 .../63e050bf935ac341b88326d6.md               |  10 +-
 .../63e062d6090ebb486a4eda3a.md               |   6 +-
 .../63e949b8327aa2aca2ca8eac.md               |  16 +--
 .../63e95a45dce95baf41dd4f78.md               |   8 +-
 .../63e96938d2a347b2734a1587.md               |   8 +-
 .../63e96eb94c97b6b31ee50f63.md               |   8 +-
 .../63e9737f686c76b4078a60f4.md               |  10 +-
 .../63f28972973504e7bb58b0b3.md               |  12 +-
 .../63f28ef082d771e8bf71f94a.md               |   8 +-
 .../63f29804e3ec00ea6fab1ec4.md               |  14 +--
 .../63f29ce62aea65eb041758c8.md               |  12 +-
 .../63f2a0a860790eebe61bf908.md               |   8 +-
 .../63f2a5f09a785aed155c0a56.md               |  18 +--
 .../63f2a8e14fb388edd3242527.md               |  18 +--
 .../63f2aa36fcdc63ee4e18fc37.md               |  18 +--
 .../641fcfd468185384ac218b7d.md               |   8 +-
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 ...-meaning-by-using-descriptive-link-text.md |   2 +-
 ...adjust-the-hover-state-of-an-anchor-tag.md |   8 +-
 .../decrease-the-opacity-of-an-element.md     |   2 +-
 ...st-an-anchor-element-within-a-paragraph.md |   6 +-
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../61408f155e798909b6908712.md               |   2 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   4 +-
 .../5ddbd81294d8ddc1510a8e56.md               |   4 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../64388945b59341057e955fbb.md               |  12 +-
 .../643c0ab6779047014ca69b4f.md               |  12 +-
 .../643c14c8027369027334e802.md               |   8 +-
 .../643c337176a83407d0cd915c.md               |  10 +-
 .../643c359312d030093352fe41.md               |  12 +-
 .../643c565936a10109b3f59326.md               |   8 +-
 .../643c56790fac5409eb5ec6f9.md               |   4 +-
 .../643c8d9a73965c0a26d7f634.md               |   6 +-
 .../643c90830bbeb40ab15148a6.md               |  14 +--
 .../643c95001ff61f0b3c39ce71.md               |   4 +-
 .../643e9ee64efc77016fa3397c.md               |   4 +-
 .../6444062a33ab4c03d0c2e9f5.md               |   8 +-
 .../64440a50d076c204051f2cc0.md               |  24 ++--
 .../644fb1d7f0257702a0c935cf.md               |  10 +-
 .../645763874fd6d901c273db29.md               |   8 +-
 .../645f06144bc0dc0143a5a3a2.md               |  10 +-
 .../645f7231271ab1012bc659b8.md               |   6 +-
 .../645f764c37de33015ded1273.md               |  14 +--
 .../645f7879ebbdb201892e55e1.md               |  14 +--
 .../645f8615fa144d01c476b22c.md               |  18 +--
 .../646474a88d0d4a016f895ba8.md               |  10 +-
 .../64648c3254e52901e36e7703.md               |  10 +-
 .../646494e11d0cab03caee204c.md               |  10 +-
 .../64649b108df035051cb2ba2d.md               |  10 +-
 .../657386f11fb8265660bfac75.md               |  14 +--
 .../65738cc6cba1825b14806b3d.md               |  12 +-
 .../65739e21dbdf776ccfbf2df5.md               |  12 +-
 .../6576076879130f6cf7426e82.md               |  10 +-
 .../65760954561c726e832a0cc8.md               |  18 +--
 .../65760ce115eb06716baeb361.md               |  20 +--
 .../65760de70283687288fe70cf.md               |  20 +--
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../660f415b76859a2736771607.md               |   4 +-
 .../66458f0a05df478aa627629e.md               |  18 +--
 .../664599653fcd6e97104f9261.md               |  14 +--
 .../664ed9344ba3495e1f67f8ea.md               |  14 +--
 .../664ed97c55a99e5ffab759dc.md               |  22 ++--
 .../665732da4815b70bb083915e.md               |  18 +--
 .../665732e62eb8b30c249b5c2c.md               |   6 +-
 .../66643c93e05093c728abdbe9.md               |  16 +--
 .../66643c9a9e0ad1c787f5fe2b.md               |   8 +-
 .../63c620161fc2b49ac340ffc4.md               |  12 +-
 .../63cf7e324c1831f8d936b3ae.md               |  10 +-
 .../63cf812bb8ecd4f9cf749b8f.md               |   6 +-
 .../63cf83fdbb51d9fa54654ae6.md               |   6 +-
 .../63cf91b0ff6e9300ead140cc.md               |   8 +-
 .../63cf920228531a0145abd0b3.md               |   8 +-
 .../63cf93472de77d01bf8474bf.md               |  16 +--
 .../63d120a05ee93f38353b84c0.md               |   8 +-
 .../63d1214a0ac7a9389793269b.md               |  30 ++---
 .../63d128eaedcc773d2ded2128.md               |  30 ++---
 .../63e0334b7a24bd3c96aca4de.md               |   8 +-
 .../63e036373fc9173d284e165a.md               |  10 +-
 .../63e03b86008bbb3e1c3de846.md               |   6 +-
 .../63e050bf935ac341b88326d6.md               |  10 +-
 .../63e062d6090ebb486a4eda3a.md               |   6 +-
 .../63e949b8327aa2aca2ca8eac.md               |  16 +--
 .../63e95a45dce95baf41dd4f78.md               |   8 +-
 .../63e96938d2a347b2734a1587.md               |   8 +-
 .../63e96eb94c97b6b31ee50f63.md               |   8 +-
 .../63e9737f686c76b4078a60f4.md               |  10 +-
 .../63f28972973504e7bb58b0b3.md               |  12 +-
 .../63f28ef082d771e8bf71f94a.md               |   8 +-
 .../63f29804e3ec00ea6fab1ec4.md               |  14 +--
 .../63f29ce62aea65eb041758c8.md               |  12 +-
 .../63f2a0a860790eebe61bf908.md               |   8 +-
 .../63f2a5f09a785aed155c0a56.md               |  18 +--
 .../63f2a8e14fb388edd3242527.md               |  18 +--
 .../63f2aa36fcdc63ee4e18fc37.md               |  18 +--
 .../641fcfd468185384ac218b7d.md               |   8 +-
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 ...-reinitializing-variables-inside-a-loop.md |  16 +--
 ...d-where-an-objects-prototype-comes-from.md |  12 +-
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  24 ++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../sass/create-reusable-css-with-mixins.md   |   8 +-
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   4 +-
 .../5ef9b03c81a63668521804d8.md               |   2 +-
 .../5ef9b03c81a63668521804dc.md               |   2 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../60f0286404aefb0562a4fdf9.md               |  12 +-
 .../646ceb843412c74edee27a79.md               |  22 ++--
 .../646cecc9eb5c4f4f73dafd07.md               |   2 +-
 .../646cef0c2b98915094df7099.md               |   2 +-
 .../646cf1206cac5f51804f49cf.md               |   2 +-
 .../646cf2249f02ca5233d9af7c.md               |   2 +-
 .../646cf48d8f8e1f535a1821d3.md               |   2 +-
 .../646cf6cbca98e258da65c979.md               |   2 +-
 .../646cf88aa884405a11ea5bcc.md               |   2 +-
 .../646cfc2b8e6fe95c20a819d5.md               |   2 +-
 .../646cfd853634255d02b64cc1.md               |   2 +-
 .../646cfde6ac612e5d60391f50.md               |   2 +-
 .../646dd556d524bc61c0139bd6.md               |   2 +-
 .../646dd6f9caa862627dd87772.md               |   2 +-
 .../646dd7cfd0cfac630c1dd520.md               |   2 +-
 .../646dd8c79ec23463a3d0e356.md               |   2 +-
 .../646dd9d9a729916460724f16.md               |   2 +-
 .../646ddab8afd73764f5241bbf.md               |   2 +-
 .../646ddb61ff08366570cc5902.md               |   2 +-
 .../646ddd3f9f97a0667b964bdb.md               |   2 +-
 .../646dde7dc20dc167489faa69.md               |   2 +-
 .../646ddf888632fa67f1180940.md               |   2 +-
 .../646de5dc8988076a1d992afd.md               |   2 +-
 .../646de6a97b50a86ac487de86.md               |   2 +-
 .../646de7b64467e96b7d35b5cd.md               |   2 +-
 .../646de8478d6f796bfbdccfb2.md               |   2 +-
 .../646de8d204a3426c7d184372.md               |   2 +-
 .../646dea1c98c2426d43a705c3.md               |   2 +-
 .../646deb169847f86df0f95bfc.md               |   2 +-
 .../646dec359bef3b7811fba5a6.md               |   2 +-
 .../646dedbcba062079128b2ecc.md               |   2 +-
 .../646def5e863abf7a14501421.md               |   2 +-
 .../646df03c8f79337ab46f148b.md               |   2 +-
 .../646df0cf26413a7b35e4b8b3.md               |   2 +-
 .../646df1d1aa4ae57bdf1869c4.md               |   2 +-
 .../646dffd8ce9ac77ec1906f2e.md               |   2 +-
 .../646f0417322c0e04983a5149.md               |   2 +-
 .../646f08293804a30685533c6f.md               |   2 +-
 .../646f09293eb3230723a62f77.md               |   2 +-
 .../646f0c9a1e3360092d1bbd33.md               |   2 +-
 .../646f0ce5737243098ad6e494.md               |   2 +-
 .../646f0ef13604420a8744f7d4.md               |   2 +-
 .../646f0f7c5933560af8e7e380.md               |   2 +-
 .../646f102bf87b350b593baa72.md               |   2 +-
 .../646f107abb89d00bb99f387a.md               |   2 +-
 .../646f12da0b4c5d0ca162834a.md               |   2 +-
 .../646f135eab69d90d0c6d4e9b.md               |   2 +-
 .../646f159b2cffb21150b927cb.md               |   2 +-
 .../646f164bf100dd11d226161f.md               |   2 +-
 .../646f1764e2f1d212ba9785a7.md               |   2 +-
 .../646f1802a09a171332e14630.md               |   2 +-
 .../646f4d6c42dc5f214f4e7444.md               |   2 +-
 .../646f4e46e81f7021d5fd9c1d.md               |   2 +-
 .../646f4f6a14e3c522d130a0d2.md               |   2 +-
 .../646f4fe12b7985232bf475a5.md               |   2 +-
 .../646f507e4d1cd323f17db4fc.md               |   2 +-
 .../646f516dbfc1342495515625.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../64a2687ef267e5934a2f93e3.md               |   2 +-
 .../64a26ac5540c5493f4641f10.md               |   2 +-
 .../64a3bcbc83e574b58c8ed048.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |  30 ++---
 .../6676a8b01e56ec1a1e07c202.md               |  24 ++--
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../sass/create-reusable-css-with-mixins.md   |  14 +--
 .../build-a-budget-app-project/budget-app.md  |  18 +--
 .../probability-calculator.md                 |   6 +-
 .../6569c05b9166f9d5bb36c09e.md               |   2 +-
 .../6569c2cbf6c993ea8cd85682.md               |   2 +-
 .../65823ff0d4b991510fade1a8.md               |   4 +-
 .../614396f7ae83f20ea6f9f4b3.md               |  22 ++--
 .../6143cb26f7edff2dc28f7da5.md               |   4 +-
 .../6144e818fd5ea704fe56081d.md               |   4 +-
 .../6144f8dc6849e405dd8bb829.md               |   4 +-
 .../6145e6eeaa66c605eb087fe9.md               |   4 +-
 .../6145e8b5080a5f06bb0223d0.md               |   4 +-
 .../6145eb5f08a38a0786c7a80c.md               |   4 +-
 .../6145ed1f22caab087630aaad.md               |   4 +-
 .../6145ee65e2e1530938cb594d.md               |   4 +-
 .../6145f02240ff8f09f7ec913c.md               |   4 +-
 .../6145f14f019a4b0adb94b051.md               |   4 +-
 .../6145f3a5cd9be60b9459cdd6.md               |   4 +-
 .../6145f47393fbe70c4d885f9c.md               |   4 +-
 .../6145f59029474c0d3dc1c8b8.md               |   4 +-
 .../6145f685797bd30df9784e8c.md               |   4 +-
 .../6145f829ac6a920ebf5797d7.md               |   4 +-
 .../6145f8f8bcd4370f6509078e.md               |   4 +-
 .../6145fb5018cb5b100cb2a88c.md               |   4 +-
 .../6145fc3707fc3310c277f5c8.md               |   4 +-
 .../614796cb8086be482d60e0ac.md               |   4 +-
 .../6147a14ef5668b5881ef2297.md               |   4 +-
 .../614878f7a412310647873015.md               |   4 +-
 .../61487b77d4a37707073a64e5.md               |   4 +-
 .../61487da611a65307e78d2c20.md               |   4 +-
 .../61487f703571b60899055cf9.md               |   4 +-
 .../614880dc16070e093e29bc56.md               |   4 +-
 .../614883b6fa720e09fb167de9.md               |   4 +-
 .../614884c1f5d6f30ab3d78cde.md               |   4 +-
 .../61488ecfd05e290b5712e6da.md               |   4 +-
 .../6148d99cdc7acd0c519862cb.md               |   4 +-
 .../6148da157cc0bd0d06df5c0a.md               |   4 +-
 .../6148dc095264000dce348bf5.md               |   4 +-
 .../6148dcaaf2e8750e6cb4501a.md               |   4 +-
 .../6148dd31d210990f0fb140f8.md               |   4 +-
 .../6148defa9c01520fb9d178a0.md               |   4 +-
 .../6148dfab9b54c110577de165.md               |   4 +-
 .../6148e0bcc13efd10f7d7a6a9.md               |   4 +-
 .../6148e161ecec9511941f8833.md               |   4 +-
 .../6148e28706b34912340fd042.md               |   4 +-
 .../6148e335c1edd512d00e4691.md               |   4 +-
 .../6148e41c728f65138addf9cc.md               |   4 +-
 .../6148e5aeb102e3142de026a2.md               |   8 +-
 .../6351e7a8684bf5377c4ee7f7.md               |   4 +-
 .../5f331e55dfab7a896e53c3a1.md               |  14 ++-
 .../5f3477cb2e27333b1ab2b955.md               |  28 +++--
 .../5f3ef6e01f288a026d709587.md               |  30 +++--
 .../5f46e8284aae155c83015dee.md               |  21 +++-
 .../5d822fd413a79914d39e98fb.md               |   2 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../646ceb843412c74edee27a79.md               |   2 +-
 .../6476f7a4827bcc61682f2347.md               |   2 +-
 .../6676a8a8d9861319ee901a90.md               |   2 +-
 .../655485321913feabbc5f00f8.md               |   2 +-
 .../6555d458687cb3b357834df9.md               |   2 +-
 .../6555dd138e70cae6b546966d.md               |   2 +-
 .../6555de565387a2efe90a6ccc.md               |   2 +-
 .../6555e04aeb225bfbae237344.md               |   2 +-
 .../6555e0bfe4d69904410f7cd3.md               |   2 +-
 .../6555e57d3e6d9d221c4735be.md               |   2 +-
 .../6555e6cec786da2aadc11ea0.md               |   2 +-
 .../65572399a8e16d50bc2c1ff3.md               |   2 +-
 .../655724bac464795a0ad91082.md               |   2 +-
 .../655729e68e49b277a6b448bd.md               |   2 +-
 .../65572bb34a7e488224b937fc.md               |   2 +-
 .../65572e5aaf022790fb4a81b1.md               |   2 +-
 .../65573a97c59ddbbf028ca95e.md               |   2 +-
 .../6557421eb6a7a0f0500e3106.md               |   2 +-
 .../655b4c8f636d9675953a0388.md               |   2 +-
 .../655b4dad1d38ff7cdd65cbfe.md               |   4 +-
 .../63c9e45519caf31b987fbb5f.md               |  14 +--
 .../introduction-flexbox-lesson-a.md          |  60 +++++++++
 .../introduction-flexbox-lesson-b.md          |  40 ++++++
 .../introduction-flexbox-lesson-c.md          |  44 +++++++
 .../introduction-flexbox-lesson-d.md          |  36 ++++++
 .../introduction-flexbox-lesson-e.md          |  46 +++++++
 .../introduction-flexbox-lesson-f.md          |  40 ++++++
 .../introduction-flexbox-lesson-g.md          |  45 +++++++
 .../introduction-flexbox-lesson-h.md          |  41 +++++++
 .../introduction-flexbox-lesson-i.md          |  45 +++++++
 .../introduction-flexbox-lesson-j.md          |  52 ++++++++
 .../introduction-flexbox-lesson-k.md          |  48 ++++++++
 .../learn-arrays-and-loops-lesson-a.md        |  44 +++++++
 .../learn-arrays-and-loops-lesson-b.md        |  47 +++++++
 .../learn-arrays-and-loops-lesson-c.md        |  64 ++++++++++
 .../learn-arrays-and-loops-lesson-d.md        |  67 ++++++++++
 .../learn-arrays-and-loops-lesson-e.md        |  63 ++++++++++
 .../learn-arrays-and-loops-lesson-f.md        |  82 +++++++++++++
 .../learn-arrays-and-loops-lesson-g.md        |  57 +++++++++
 .../learn-arrays-and-loops-lesson-h.md        |  58 +++++++++
 .../learn-block-and-inline-lesson-a.md        |  28 +++++
 .../learn-block-and-inline-lesson-b.md        |  41 +++++++
 .../learn-block-and-inline-lesson-c.md        |  36 ++++++
 .../learn-block-and-inline-lesson-d.md        |  36 ++++++
 .../learn-block-and-inline-lesson-e.md        |  36 ++++++
 .../learn-block-and-inline-lesson-f.md        |  36 ++++++
 .../learn-block-and-inline-lesson-g.md        |  36 ++++++
 .../learn-block-and-inline-lesson-h.md        |  36 ++++++
 .../learn-block-and-inline-lesson-i.md        |  32 +++++
 .../learn-block-and-inline-lesson-j.md        |  36 ++++++
 .../learn-block-and-inline-lesson-k.md        |  36 ++++++
 .../css-foundations-lesson-a.md               |  53 ++++++++
 .../css-foundations-lesson-b.md               |  75 +++++++++++
 .../css-foundations-lesson-c.md               |  90 ++++++++++++++
 .../css-foundations-lesson-d.md               |  86 +++++++++++++
 .../css-foundations-lesson-e.md               |  61 +++++++++
 .../css-foundations-lesson-f.md               |  47 +++++++
 .../css-foundations-lesson-g.md               |  54 ++++++++
 .../css-foundations-lesson-h.md               |  46 +++++++
 .../the-cascade-of-css-lesson-a.md            |  39 ++++++
 .../the-cascade-of-css-lesson-b.md            |  42 +++++++
 .../the-cascade-of-css-lesson-c.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-d.md            |  58 +++++++++
 .../the-cascade-of-css-lesson-e.md            |  51 ++++++++
 .../the-cascade-of-css-lesson-f.md            |  63 ++++++++++
 .../the-cascade-of-css-lesson-g.md            |  60 +++++++++
 .../the-cascade-of-css-lesson-h.md            |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-a.md |  51 ++++++++
 ...rn-data-types-and-conditionals-lesson-b.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-c.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-d.md |  42 +++++++
 ...rn-data-types-and-conditionals-lesson-e.md |  46 +++++++
 ...rn-data-types-and-conditionals-lesson-f.md |  59 +++++++++
 ...rn-data-types-and-conditionals-lesson-g.md |  54 ++++++++
 ...rn-data-types-and-conditionals-lesson-h.md |  58 +++++++++
 ...rn-data-types-and-conditionals-lesson-i.md |  60 +++++++++
 ...rn-data-types-and-conditionals-lesson-j.md | 101 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-k.md | 102 +++++++++++++++
 ...rn-data-types-and-conditionals-lesson-l.md |  42 +++++++
 .../learn-function-basics-lesson-a.md         |  48 ++++++++
 .../learn-function-basics-lesson-b.md         |  52 ++++++++
 .../learn-function-basics-lesson-c.md         |  62 ++++++++++
 .../learn-function-basics-lesson-d.md         |  56 +++++++++
 .../learn-function-basics-lesson-e.md         |  74 +++++++++++
 .../learn-function-basics-lesson-f.md         |  52 ++++++++
 .../html-foundations-lesson-a.md              |  46 +++++++
 .../html-foundations-lesson-b.md              |  39 ++++++
 .../html-foundations-lesson-c.md              |  54 ++++++++
 .../html-foundations-lesson-d.md              |  46 +++++++
 .../html-foundations-lesson-e.md              |  65 ++++++++++
 .../html-foundations-lesson-f.md              |  48 ++++++++
 .../html-foundations-lesson-g.md              |  33 +++++
 .../html-foundations-lesson-h.md              |  32 +++++
 ...problems-and-understand-errors-lesson-a.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-b.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-c.md |  53 ++++++++
 ...problems-and-understand-errors-lesson-d.md |  39 ++++++
 ...problems-and-understand-errors-lesson-e.md |  58 +++++++++
 ...problems-and-understand-errors-lesson-f.md |  63 ++++++++++
 ...problems-and-understand-errors-lesson-g.md |  56 +++++++++
 ...problems-and-understand-errors-lesson-h.md |  42 +++++++
 .../learn-variables-and-operators-lesson-a.md |  64 ++++++++++
 .../learn-variables-and-operators-lesson-b.md |  65 ++++++++++
 .../learn-variables-and-operators-lesson-c.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-d.md |  66 ++++++++++
 .../learn-variables-and-operators-lesson-e.md |  51 ++++++++
 .../learn-variables-and-operators-lesson-f.md |  82 +++++++++++++
 .../learn-variables-and-operators-lesson-g.md |  81 ++++++++++++
 .../learn-variables-and-operators-lesson-h.md |  61 +++++++++
 .../learn-variables-and-operators-lesson-i.md | 116 ++++++++++++++++++
 .../links-and-images-lesson-a.md              |  68 ++++++++++
 .../links-and-images-lesson-b.md              |  62 ++++++++++
 .../links-and-images-lesson-c.md              |  63 ++++++++++
 .../links-and-images-lesson-d.md              | 112 +++++++++++++++++
 .../links-and-images-lesson-e.md              |  98 +++++++++++++++
 .../links-and-images-lesson-f.md              |  93 ++++++++++++++
 .../links-and-images-lesson-g.md              |  93 ++++++++++++++
 .../links-and-images-lesson-h.md              |  97 +++++++++++++++
 .../the-box-model-lesson-a.md                 |  45 +++++++
 .../the-box-model-lesson-b.md                 |  42 +++++++
 .../the-box-model-lesson-c.md                 |  46 +++++++
 .../the-box-model-lesson-d.md                 |  45 +++++++
 .../the-box-model-lesson-e.md                 |  38 ++++++
 .../the-box-model-lesson-f.md                 |  48 ++++++++
 .../the-box-model-lesson-g.md                 |  52 ++++++++
 .../the-box-model-lesson-h.md                 |  37 ++++++
 .../the-box-model-lesson-i.md                 |  36 ++++++
 .../the-box-model-lesson-j.md                 |  37 ++++++
 .../the-box-model-lesson-k.md                 |  36 ++++++
 .../the-box-model-lesson-l.md                 |  28 +++++
 .../the-box-model-lesson-m.md                 |  67 ++++++++++
 .../working-with-text-lesson-a.md             |  60 +++++++++
 .../working-with-text-lesson-b.md             |  39 ++++++
 .../working-with-text-lesson-c.md             |  47 +++++++
 .../working-with-text-lesson-d.md             |  38 ++++++
 .../working-with-text-lesson-e.md             |  65 ++++++++++
 .../working-with-text-lesson-f.md             |  66 ++++++++++
 .../working-with-text-lesson-g.md             |  48 ++++++++
 .../working-with-text-lesson-h.md             |  65 ++++++++++
 .../working-with-text-lesson-i.md             |  44 +++++++
 .../working-with-text-lesson-j.md             |  44 +++++++
 .../6606682f3fbb93838673920d.md               |   2 +-
 .../66066c563917c5874b792337.md               |   8 +-
 .../660681a717d84e89da14f6f4.md               |  18 +--
 .../660682b572c0bb8aa3075feb.md               |  12 +-
 .../6606838ecf64478b53a51496.md               |  16 +--
 .../660683e649f8fa8bbd5baac5.md               |   2 +-
 .../66068414094b3a8c10a4770d.md               |   8 +-
 .../6606846eba453e8c7bacb2f7.md               |  16 +--
 .../660684bfc24bf48cfaaf9cfa.md               |   8 +-
 .../660686845b5e788def3527ca.md               |  18 +--
 .../66068a6d0bb2aa90f0d93979.md               |   2 +-
 .../66068ad667567091500128c5.md               |  10 +-
 .../66068b650b681c91de9e19a0.md               |  16 +--
 .../66068bf9c9046292705b856d.md               |  16 +--
 .../66068c5cfc7a4992f2574ab2.md               |   8 +-
 .../66068d4033a07d9393291ef0.md               |  10 +-
 .../66068f5b2b7dda9450a7cc2c.md               |  16 +--
 .../66068fc7aa2fe094c5cb84bd.md               |   6 +-
 .../6606906b3f31fc953f1ee3b6.md               |  24 ++--
 .../660694cf7803c598ce999171.md               |   2 +-
 .../6606952c28640e9941c8fa29.md               |  10 +-
 .../660695c672854899d6862834.md               |  16 +--
 .../660696292c16659a5e9ccf81.md               |  10 +-
 .../660696cce3e4e79af4612466.md               |  16 +--
 .../66069719acca7d9b59499ce9.md               |  10 +-
 .../6606977e8f0b509bdac39012.md               |  16 +--
 .../660697f307c6559c60e976f7.md               |  10 +-
 .../6606989c34f0be9d141130b1.md               |  24 ++--
 .../6636159376b91532f4f8e49b.md               |   2 +-
 .../663621cf8781e93738b3e30f.md               |   2 +-
 .../6636242c12c019384fd78b5a.md               |   2 +-
 .../6617562f72eb2a9387252430.md               |   2 +-
 .../661757150c7a75961a574a39.md               |   2 +-
 .../66175792ec93b19771c55c62.md               |   2 +-
 .../6617962704224fe969a76811.md               |   2 +-
 .../6617b1efe920c2ffea40b54d.md               |   2 +-
 .../65fd595245455d0dca3434ba.md               |   2 +-
 .../65fd5a9680a9540e9787dec5.md               |  14 +--
 .../65fd5c89285ea50f25bd0241.md               |  18 +--
 .../65fd5d1a6cb7f10f77a06163.md               |  12 +-
 .../65fd5da902959d0fda781aa3.md               |  14 +--
 .../65fd5dfc174596101eae1107.md               |  18 +--
 .../65fd5f2abfdbc510942d76f8.md               |  18 +--
 .../65fd5f86457b4910e35b51c9.md               |   6 +-
 .../65fd620e9ba99c116c42c361.md               |  22 ++--
 .../65fd63be9afd7611d2a9b788.md               |  24 ++--
 .../65ffa914bc44081a196fa6f7.md               |  22 ++--
 .../65ffa9d80e7ffb1ab9b4df1c.md               |  10 +-
 .../65fff2b49779301d9bdab6fa.md               |  18 +--
 .../65fff336d7553c1df86f7968.md               |  18 +--
 .../65fff428290eaa1e5819c119.md               |  10 +-
 .../65fff57ce568cf1ed9702fbf.md               |  20 +--
 .../66000a440c2f492ddee509f9.md               |   2 +-
 .../662514383f43d53b748dff42.md               |   2 +-
 .../661256fe823f142fb9858beb.md               |   2 +-
 .../6613d6c3e74a984d6fcbd013.md               |   2 +-
 .../6613d803f9d4884e2a882a99.md               |   2 +-
 .../6614be98fc11336c52aa3093.md               |   2 +-
 .../662efee6946fda26f424c1a5.md               |   2 +-
 2040 files changed, 61909 insertions(+), 2896 deletions(-)
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
 create mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md

diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 1df40c93426..07a4c56c663 100644
--- a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index 9440425971f..812a2ebad11 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 86be059d642..6ec118aacc9 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index b9c52da5a06..fd9322b8616 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 داخل عنصر `section` الثاني، قم بإضافة عنصرين `div` يحملين class بقيمة `question-block`.
 
-ثم داخل كل عنصر `div.question-block`، قم بإضافة عنصر `p` مع نص للأرقام المتزايدة، بدءا من `1`، و `fieldset` واحد مع class بقيمة `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.cla
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-يجب عليك دمج عنصر `p` واحد داخل كل عنصر من عناصر `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-يجب عليك إعطاء أول عنصر `p` النص `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-يجب عليك إعطاء ثاني عنصر `p` النص `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 يجب عليك دمج عنصر `fieldset` واحد داخل كل عنصر من عناصر `div.question-block`.
@@ -55,16 +55,16 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-يجب عليك وضع عنصر `fieldset` الأول بعد عنصر `p` الأول.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-يجب عليك وضع عنصر `fieldset` الثاني بعد عنصر `p` الثاني.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 يجب عليك إعطاء أول عنصر `fieldset` سمة class بقيمة `question`.
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index c58c54de5c5..8509361d6ee 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 18fc642e267..4595318a0fa 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 58445d7499d..25a85e320f4 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 07de4ea9a67..2478d4d85a2 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index db7f0eff784..8b974507853 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 1b06bcec425..95d71cda37f 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index 18a80a967e9..2d871627147 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index 1f58013b17e..af27966f7ca 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 144a4b481cc..646db9110f8 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index d931237c31d..f3d45f64f22 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index dec6ca3a816..bc192caf9d4 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 545262f98a3..19939be0a53 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index 11913def6d0..d5d5ae07225 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index a0038c2a41a..530ed004a8c 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index b3a72a044f8..134dbba6923 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index 0ef0c2ab62c..51263e968e9 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 3e3789ef4a6..79e419b02a4 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 44b7b5fe302..bd9cd778117 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index 929eccea9b6..92cdc33950a 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index 5637fe19c51..b8a0a4ef1c8 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 85bae6ce040..87ce056d705 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index e67703b69d6..4a37c7926d0 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index 4842169078d..2a5ce499460 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 36ea1585ae6..44a1cc4b8f0 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 2a4799aed65..b636b2673ae 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index c582e58b61a..08801278696 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index fccdb4e5f47..49a724fc242 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index bf844191fcd..98540236721 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 2b9e399c4f5..10d0be69dfe 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 9e2dd4e0ac0..38ae0d45dab 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index f960d0cfe4d..5b061f4261e 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 33089161d21..d454ebf4e83 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index 56e18373106..e5ac048c30c 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index b17df2b1e63..55c9af1a49a 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index e4a4b0d3863..47682d18ca0 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index 8973159fca3..e2dadf5875b 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 8b88c465fbe..7dba38b4b61 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 8956cdd5c72..965e4b094cd 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index 960f896231a..77acc4d7915 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index c68ecc36914..d5e1472fdf8 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 0c4bdce770b..abedb1ac6f3 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 128aba582d6..6fd7b92940d 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index d92e706db3c..8c0c891f3b3 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 يكون `title` واحد من عدة عناصر توفر معلومات إضافية غير مرئية على صفحة الويب، لكنه مفيد لمحركات البحث أو كيف يتم عرض الصفحة.
 
-داخل عنصر `head`، قم بدمج عنصر `meta` مع سمة تسمى `charset` و تعيين قيمتها إلي `utf-8` لإخبار المتصفح كيفية ترميز الأحرف للصفحة. لاحظ أن عناصر `meta` مغلقة ذاتيا (self closing).
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 يجب أن يكون لديك وسم `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 يجب أن تحتوي سمة `charset` الخاصة بك على القيمة `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 51c6097d90c..a5232afed6e 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Now you need to link the `styles.css` file, so the styles will be applied again.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 لا يجب عليك تغيير عنصر `head` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 يجب أن يكون عنصر `link` الخاص بك داخل عنصر `head` الخاص بك.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 يجب أن يكون عنصر `link` الخاص بك على سمة `rel` بقيمة `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index ba2922e9dbc..36cb15cbe06 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 يمكنك استخدام عنصر `hr` لعرض مقطع بين أجزاء من محتوى مختلف.
 
-أولاً، أضف عنصر `hr` بين عنصر `p` مع فئة (class) تسمى `established` و أول عنصر `section`. لاحظ أن عناصر `hr` مغلقة ذاتيا (self closing).
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-يجب عليك إضافة عنصر `hr`. عناصر `hr` مغلقة ذاتيا.
+يجب عليك إضافة عنصر `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-لا تغيير عنصرك `p` الموجود مع فئة (class) تسمى `established`.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-لا يجب عليك تغيير عنصر `main` الحالي.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-يجب أن يكون عنصرك `hr` بين عنصرك `p` وعنصرك `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 16ef45749f4..9db6ae85e96 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ dashedName: step-88
 
 # --hints--
 
-يجب أن يكون لديك وسم `<img>`. تذكر أن عناصر `img` هي self-closing.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-يجب أن يكون لعنصر `img` الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-يجب أن يكون لعنصر `img` الخاص بك سمة `alt` بقيمة `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index 820a1345818..5e5135f9eb7 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-غالباً ما تتغير التحولات المتداخلة تدريجياً من لون إلى آخر. يمكنك أن تجعل التغيير خطاً صلباً مثل:
+غالباً ما تتغير التحولات المتداخلة تدريجياً من لون إلى آخر. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 67c08412cb3..f33b86d905b 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-يمكنك إضافة صور إلى موقع الويب الخاص بك باستخدام عنصر `img`. `img` عناصر تحتوي على opening tag بدون closing tag. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+يمكنك إضافة صور إلى موقع الويب الخاص بك باستخدام عنصر `img`. `img` عناصر تحتوي على opening tag بدون closing tag. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 أضف عنصر `img` تحت عنصر `p`. في هذه المرحلة، لن تظهر أي صورة في المتصفح.
 
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index d2839cd2028..b1fb723bd61 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/arabic/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
index 2f0972034ae..1cd55fa740f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
@@ -15,7 +15,7 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
 
 # --instructions--
 
-Camper Cat 在鏈接中使用的文本在脫離上下文的情況下，描述性不是很好。 請修改錨點標籤（`a`），將其包含的文本從 `Click here` 改爲 `information about batteries`。
+Camper Cat 在鏈接中使用的文本在脫離上下文的情況下，描述性不是很好。 Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
index 03ac4e86fb8..3c1baaac86e 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
@@ -1,6 +1,6 @@
 ---
 id: 587d781d367417b2b2512ac8
-title: 調整錨點的懸停狀態
+title: 調整錨標籤的懸停狀態
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cakRGcm'
 forumTopicId: 301035
@@ -11,7 +11,7 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag
 
 本挑戰將要涉及到僞類。 僞類是可以添加到選擇器上的關鍵字，用來選擇特定狀態的元素。
 
-比如，可以使用 `:hover` 僞類選擇器來選取超鏈接的懸停狀態。 下面的代碼可以在鼠標懸停在超鏈接上時將其 `color` 變成紅色：
+比如，可以使用 `:hover` 僞類選擇器來選取錨標籤的懸停狀態。 下面的代碼可以在鼠標懸停在錨標籤上時將其 `color` 變成紅色：
 
 ```css
 a:hover {
@@ -25,13 +25,13 @@ a:hover {
 
 # --hints--
 
-超鏈接的 `color` 應該保持黑色，應只添加 `:hover` CSS 規則。
+The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
 
 ```js
 assert($('a').css('color') == 'rgb(0, 0, 0)');
 ```
 
-懸停超鏈接時超鏈接的 `color` 應該變成藍色。
+懸停錨標籤時它的 `color` 應該變成藍色。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
index 5b6e3f07738..cd5b865d5f0 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
@@ -17,7 +17,7 @@ CSS 裏的 `opacity` 屬性用來設置元素的透明度。
 
 # --instructions--
 
-將 class 爲 `links` 的所有超鏈接的 `opacity` 屬性值設置 0.7。
+將 class 爲 `links` 的所有錨標籤的 `opacity` 屬性值設置 0.7。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
index 215e492d541..dbb8380a343 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -22,13 +22,13 @@ dashedName: nest-an-anchor-element-within-a-paragraph
 <p> Here's a ... for you to follow. </p>
 ```
 
-接下來是*錨點*元素 `<a>`（它需要結束標籤 `</a>`）：
+接下來是*錨*元素 `<a>`（它需要結束標籤 `</a>`）：
 
 ```html
 <a> ... </a>
 ```
 
-`target` 是錨點元素的一個屬性，它用來指定鏈接的打開方式。 屬性值 `_blank` 表示鏈接會在新標籤頁打開。 `href` 是錨點元素的另一個屬性，它用來指定鏈接的 URL：
+`target` 是錨元素的一個屬性，它用來指定鏈接的打開方式。 屬性值 `_blank` 表示鏈接會在新標籤頁打開。 `href` 是錨元素的另一個屬性，它用來指定鏈接的 URL：
 
 ```html
 <a href="https://www.freecodecamp.org" target="_blank"> ... </a>
@@ -46,7 +46,7 @@ Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.free
 
 # --instructions--
 
-創建一個新的段落 `p` 元素來包裹 `a` 元素。 不要創建一個新的錨點標籤。 新段落應有文本 `View more cat photos`，其中 `cat photos` 是一個鏈接，其餘是純文本。
+創建一個新的段落 `p` 元素來包裹 `a` 元素。 不要創建一個新的錨標籤。 新段落應有文本 `View more cat photos`，其中 `cat photos` 是一個鏈接，其餘是純文本。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 5d1ecb6a1e1..6796a476f9b 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index c1f60f6532e..0cf2307d597 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index efeab06014b..5275c7e72d3 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
index 32ab1761278..8630e7ad39b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
@@ -13,7 +13,7 @@ dashedName: step-12
 - `HTML`
 - `CSS`
 
-列表項文本應包含在錨標記中。
+列表項文本應包含在錨標籤中。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 5049771891a..c56a6947bd4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 在第二個 `section` 元素中，添加兩個具有 `question-block` 類的 `div` 元素。
 
-然後，在每個 `div.question-block` 元素中，添加一個帶有遞增數字文本、從 `1` 開始的 `p` 元素，以及一個具有 `question` 類的 `fieldset` 元素。
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.cla
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-你應該在每個 `div.question-block` 元素中嵌套一個 `p` 元素。
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-你應該給第一個 `p` 元素添加文本 `1`。
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-你應該給第二個 `p` 元素添加文本 `2`。
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 你應該在每個 `div.question-block` 元素中嵌套一個 `fieldset` 元素。
@@ -55,16 +55,16 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-你應該將第一個 `fieldset` 元素放在第一個 `p` 元素之後。
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-你應該將第二個 `fieldset` 元素放在第二個 `p` 元素之後。
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 你應該給第一個 `fieldset` 元素添加一個 `question` 類。
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index 1a8c6c9522c..1b0736a653a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 81efa8bbf41..579e5f8799c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 14eb0359351..e7bba1eaead 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 65f8dd443e7..62c57c0c058 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index 82c4a6454b3..ddc30b5b09f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 89ddce9af7d..f8f69b65bdb 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index fa8ef871600..fae9dfd344b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index 862870f1a6f..16f93484a83 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 7694fd34eb5..54c120c1102 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index 98b5ad3df50..fd2ab389318 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 1409a9ed614..1e2dc57d9c5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 98992013339..de58aeea2a4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index c959bce4832..6b4fab72e64 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 55a1422f55a..d6e2d3de358 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 2faa3706581..70593b2a65c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index cc3eb395769..ba39cd10181 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 00edd2e2f8c..023ce1a07f8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 056db9df321..c4b094a25e1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index 021f89b0876..4538897c8ef 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index bbbe3eff38e..7fdd24b109b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 7845fd255d0..872e4321725 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 50a60fb6460..d1c56a5d159 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index 6248fbb0ca7..85154ba9780 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index f0096131347..5d8e13ef6be 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index e53885b7420..3769a75df10 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index ea2f6097685..bea97659c15 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index 19ea866fba9..ed3d22dbea6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 4b4eac6fa42..84b8aa64f7b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 71b3860147d..2c88283b74d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index d431cfeafcb..7c2423c6ab0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index 073d84fa7cd..80a8e50770f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 801f89d4032..34be855b972 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index a2f656a0f30..42d735145c9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 2c2f21441a3..c2ba0555da1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index bfd5a2f7305..426cb082d1a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index 5442702403f..dc1bea8cf3f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 8e4c546fdce..f420aa5b877 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 04fbd2038bf..1e8b62dbd64 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index 1ca1c8bf72d..269b4e2a8c9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 7746c6224f2..1754170d6ac 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 30afb4b3ebb..0aa70c1a0f5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index b2844c1bf2a..fcd540bd9a8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 8479afbbbd7..58db2b33a03 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 `title` 是網頁上幾個不可見附加信息之一，但它對搜索引擎和網頁如何顯示很有用。
 
-在`head`元素中，嵌套一個 `meta` 元素，其屬性名爲 `charset`，值爲`utf-8`，以告訴瀏覽器如何對頁面進行編碼。 請注意，`meta` 元素是自閉合的。
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 你應該有一個 `meta` 標籤。
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 你的 `meta` 標籤應該有一個 `charset` 屬性。
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 你的 `charset` 屬性的值應該爲 `utf-8`。
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index d5c51a6f67c..65a0d05ce55 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Now you need to link the `styles.css` file, so the styles will be applied again.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 你不應該改變你現有的 `head` 元素。 請確保你沒有刪除結束標記。
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-你應該有一個自閉合的 `link` 元素。
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 你的 `link` 元素應該在你的 `head` 元素中。
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 你的 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 你的 `link` 元素應該有一個 `href` 屬性，其值爲 `styles.css`。
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index 2d3af8d4630..965331a1500 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 你可以使用 `hr` 元素在不同內容的部分之間顯示一個分隔符。
 
-首先，在具有 `established` 類的 `p` 元素和第一個 `section` 之間添加一個 `hr` 元素。 注意：`hr` 元素是沒有結束標籤的。
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-你應該添加一個 `hr` 元素。 請注意，`hr` 元素是自閉合的。
+你應該添加一個 `hr` 元素。
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-你不應更改你現有的具有類 `established` 的 `p` 元素。
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-你不應該改變你現有的 `main` 元素。
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-你的 `hr` 元素應該在你的 `p` 元素和 `section` 元素之間。
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 703455930c9..87ae64277ee 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ dashedName: step-88
 
 # --hints--
 
-你應該有一個 `<img>` 標籤。 請記住，`img` 元素是自閉合的。
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-你的 `img` 元素應具有值爲 `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg` 的 `src` 屬性。
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-你的 `img` 元素應該具有值爲 `coffee icon` 的 `alt` 屬性。
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index 3cc02ad776d..dc91ba88683 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-漸變過渡通常會逐漸從一種顏色變爲另一種顏色。 你可以將更改設爲實線，如下所示：
+漸變過渡通常會逐漸從一種顏色變爲另一種顏色。 When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index b3895113ed4..908205a0b2b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-你可以通過使用 `img` 元素來爲你的網站添加圖片。 `img` 元素只有一個開始標籤，沒有結束標籤。 A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+你可以通過使用 `img` 元素來爲你的網站添加圖片。 `img` 元素只有一個開始標籤，沒有結束標籤。 An element without a closing tag is known as a <dfn>void element</dfn>.
 
 在 `p` 元素的下方添加一個 `img` 元素。 此時，沒有圖片會出現在瀏覽器中。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 6cfc71332fe..fcf2b0f0806 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -19,13 +19,13 @@ dashedName: step-10
 
 # --hints--
 
-你的錨點元素（`a`）應該有一個開始標籤。 開始標籤的書寫語法爲：`<elementName>`。
+你的錨元素（`a`）應該有一個開始標籤。 開始標籤的書寫語法爲：`<elementName>`。
 
 ```js
 assert(document.querySelector('a'));
 ```
 
-你的錨點元素（`a`）應該有一個結束標籤。 結束標籤在 `<` 字符後面要有一個 `/`。
+你的錨元素（`a`）應該有一個結束標籤。 結束標籤在 `<` 字符後面要有一個 `/`。
 
 ```js
 assert(code.match(/<\/a\>/));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index f9a79fc4e82..d87f66f0e99 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -7,7 +7,7 @@ dashedName: step-11
 
 # --description--
 
-鏈接的文本必須放置在錨點元素（`a`）的開始和結束標籤之間。
+鏈接的文本必須放置在錨元素（`a`）的開始和結束標籤之間。
 
 這是一個鏈接文本是 `click here to go to freeCodeCamp.org` 的示例：
 
@@ -25,7 +25,7 @@ dashedName: step-11
 assert(document.querySelector('a'));
 ```
 
-你的錨點元素（`a`）應該有一個閉合標籤。 閉合標籤在 `<` 字符後面要有一個 `/`。
+你的錨元素（`a`）應該有一個結束標籤。 閉合標籤在 `<` 字符後面要有一個 `/`。
 
 ```js
 assert(code.match(/<\/a\>/));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index 69b07d2589d..bb0ba7e0805 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index f170f322093..0cb2aee0f75 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 下一個位置屬性是 `absolute`。 當你爲 `position` 屬性使用 `absolute` 值時，該元素將從文檔的正常流程中取出，然後其位置由 `top`、`right`、`bottom` 和 `left` 屬性決定。
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
index 6b578cc7e24..8dae036cd53 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
@@ -7,9 +7,9 @@ dashedName: step-4
 
 # --description--
 
-To populate the forum leaderboard with data, you will need to request the data from an API. This is known as an <dfn>asynchronous</dfn> operation, which means that tasks execute independently of the main program flow.
+爲了用數據填充論壇排行榜，你需要從 API 請求數據。 這被稱爲<dfn>異步</dfn>操作，這意味着任務獨立於主程序流執行。
 
-You can use the `async` keyword to create an asynchronous function, which returns a promise.
+你可以使用 `async` 關鍵字創建一個異步函數，該函數會返回一個 Promise。
 
 ```js
 const example = async () => {
@@ -17,23 +17,23 @@ const example = async () => {
 };
 ```
 
-Use the `async` keyword to create an asynchronous arrow function called `fetchData`.
+使用 `async` 關鍵字來創建一個名爲 `fetchData` 的異步箭頭函數。
 
 # --hints--
 
-You should use the `async` keyword to create an asynchronous arrow function called `fetchData`.
+你應該使用 `async` 關鍵字創建一個名爲 `fetchData` 的異步箭頭函數。
 
 ```js
 assert.match(code, /const\s+fetchData\s*=\s*async\s*\(\s*\)\s*=>\s*{\s*[^}]*\s*}/);
 ```
 
-`fetchData` should be defined.
+應該定義 `fetchData`。
 
 ```js
 assert.isDefined(fetchData);
 ```
 
-`fetchData` should be a function.
+`fetchData` 應該是一個函數。
 
 ```js
 assert.isFunction(fetchData);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
index 731fcc3a16e..4d73f79b261 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
@@ -7,9 +7,9 @@ dashedName: step-6
 
 # --description--
 
-In the previous project, you used `fetch()` with the `.then()` method to perform logic after the promise was resolved. Now you will use the `await` keyword to handle the asynchronous nature of the `fetch()` method.
+在之前的項目中，你使用了 `fetch()` 和 `.then()` 方法在 Promise 解析後執行邏輯。 現在你將使用 `await` 關鍵字來處理 `fetch()` 方法的異步特性。
 
-The `await` keyword waits for a promise to resolve and returns the result.
+`await` 關鍵字等待一個 promise 解析並返回結果。
 
 ```js
 const example = async () => {
@@ -18,23 +18,23 @@ const example = async () => {
 }
 ```
 
-Inside the `try` block, create a constant called `res` and assign it `await fetch()`. For the `fetch` call, pass in the `forumLatest` variable.
+在 `try` 塊中，創建一個名爲 `res` 的常量，並將 `await fetch()` 賦值給它。 對於 `fetch` 調用，傳入 `forumLatest` 變量。
 
 # --hints--
 
-You should have a constant called `res` inside your `try` block.
+你應該在你的 `try` 塊中有一個名爲 `res` 的常量。
 
 ```js
 assert.match(code, /\s*const\s+res/)
 ```
 
-You should assign `await fetch()` to your `res` variable.
+你應該將 `await fetch()` 賦值給你的 `res` 變量。
 
 ```js
 assert.match(code, /\s*const\s+res\s*=\s*await\s+fetch\(\s*(.*)\s*\)/);
 ```
 
-You should pass in the `forumLatest` constant to the `fetch` call.
+你應該將 `forumLatest` 常量傳遞給 `fetch` 調用。
 
 ```js
 assert.match(code, /const\s+fetchData\s*=\s*async\s*\(\s*\)\s*=>\s*{\s*try\s*{\s*const\s+res\s*=\s*await\s+fetch\(\s*forumLatest\s*\)\s*;?\s*}\s*catch\s*\(\s*err\s*\)\s*{\s*}\s*}/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
index 6841200ec76..f637f7719d4 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
@@ -7,19 +7,19 @@ dashedName: step-7
 
 # --description--
 
-You want to get the response body as a JSON object. The `.json()` method of your `res` variable returns a promise, which means you will need to `await` it.
+你想要將響應主體作爲 JSON 對象獲取。 你的 `res` 變量的 `.json()` 方法返回一個 Promise，這意味着你需要 `await` 它。
 
-Create a constant called `data` and assign it the value of `await res.json()`.
+創建一個名爲 `data` 的常量，並將其賦值爲 `await res.json()` 的結果。
 
 # --hints--
 
-You should have a `const` variable named `data`.
+你應該有一個名爲 `data` 的 `const` 變量。
 
 ```js
 assert.match(code, /const\s+data/);
 ```
 
-You should assign `await res.json()` to the `data` variable.
+你應該將 `await res.json()` 分配給 `data` 變量。
 
 ```js
 assert.match(code, /\s*const\s+data\s*=\s*await\s+res\.json\(\s*\)\s*;?\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
index 5058336a277..20154f63786 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
@@ -7,25 +7,25 @@ dashedName: step-8
 
 # --description--
 
-To view the data results, log the `data` variable to the console inside your `try` block.
+要查看數據結果，可以在 `try` 塊中將 `data` 變量打印到控制檯。
 
-Below your `fetchData` definition, call the function and open up the console to see the results.
+在 `fetchData` 定義的下面調用這個函數，然後打開控制檯查看結果。
 
 # --hints--
 
-You should use `console.log` to log the `data` variable to the console.
+你應該使用 `console.log` 將 `data` 變量記錄到控制檯。
 
 ```js
 assert.match(code, /\s*console\.log\(\s*data\s*\)/);
 ```
 
-Your `console.log` should be inside the `try` block.
+你的 `console.log` 應該放在 `try` 塊裏面。
 
 ```js
 assert.match(code, /\s*try\s*{[\s\S]*\s*console\.log\(\s*data\s*\)[\s\S]*}\s*catch\s*\(\s*err\s*\)\s*{\s*}/);
 ```
 
-You should call the `fetchData()` function, after the `fetchData()` function is defined.
+你應該在定義 `fetchData()` 函數之後，再調用 `fetchData()` 函數。
 
 ```js
 assert.match(code, /}\s*;?\s*fetchData\(\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
index 4bb855c9e74..8b058207d0f 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
@@ -7,31 +7,31 @@ dashedName: step-10
 
 # --description--
 
-Now it is time to display the data on the page.
+現在是時候在頁面上顯示數據了。
 
-Start by creating an arrow function called `showLatestPosts`, which takes a single `data` parameter.
+首先創建一個名爲 `showLatestPosts` 的箭頭函數，它接收一個單一的 `data` 參數。
 
 # --hints--
 
-You should have an arrow function called `showLatestPosts`.
+你應該有一個名爲 `showLatestPosts` 的箭頭函數。
 
 ```js
 assert.match(code, /const\s+showLatestPosts\s*=\s*(\([^)]*\)|[^\s()]+)\s*=>\s*/);
 ```
 
-Your `showLatestPosts` function should have a `data` parameter.
+你的 `showLatestPosts` 函數應該有一個 `data` 參數。
 
 ```js
 assert.match(code, /showLatestPosts\s*=\s*(\(\s*data\s*\)|data)\s*=>/);
 ```
 
-`showLatestPosts` should be defined.
+應該定義 `showLatestPosts`。
 
 ```js
 assert.isDefined(showLatestPosts);
 ```
 
-`showLatestPosts` should be a function.
+`showLatestPosts` 應該是一個函數。
 
 ```js
 assert.isFunction(showLatestPosts);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
index a7ca2376a8e..fe5611493ae 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
@@ -7,19 +7,19 @@ dashedName: step-11
 
 # --description--
 
-As you build out your `showLatestPosts()` function, you'll need to call it to see your changes.
+當你構建 `showLatestPosts()` 函數時，你需要調用它來查看你的更改。
 
-Call the `showLatestPosts()` function at the end of your `try` block and pass in `data` for the argument.
+在 `try` 塊的末尾調用 `showLatestPosts()` 函數，並傳入 `data` 作爲參數。
 
 # --hints--
 
-You should call `showLatestPosts()` at the end of your `try` block.
+你應該在 `try` 代碼塊的末尾調用 `showLatestPosts()`。
 
 ```js
 assert.match(code, /\s*showLatestPosts\(.*\)\s*;?\s*/);
 ```
 
-You should pass `data` as the argument to `showLatestsPosts()`.
+你應該將 `data` 作爲參數傳遞給 `showLatestsPosts()`。
 
 ```js
 assert.match(code, /\s*showLatestPosts\(\s*data\s*\)\s*;?\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
index 748d2d63f4a..78515d52512 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
@@ -7,11 +7,11 @@ dashedName: step-12
 
 # --description--
 
-Back in your `showLatestPosts()` function, use destructuring to get the `topic_list` and `users` properties from the `data` object.
+回到你的 `showLatestPosts()` 函數，使用解構賦值從 `data` 對象中獲取 `topic_list` 和 `users` 屬性。
 
 # --hints--
 
-You should use `const` to destructure `topic_list` and `users` from the `data` object.
+你應該使用 `const` 從 `data` 對象中解構 `topic_list` 和 `users`。
 
 ```js
 assert.match(code, /const\s*{\s*(topic_list\s*,\s*users|users\s*,\s*topic_list)\s*}\s*=\s*data/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
index 550825fc7b8..d6f78e2da9b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
@@ -7,13 +7,13 @@ dashedName: step-13
 
 # --description--
 
-The `topic_list` object contains a `topics` array which contains the latest topics posted to the forum.
+`topic_list` 對象包含一個 `topics` 數組，其中包含論壇上最新發布的話題。
 
-Destructure the `topics` array from the `topic_list` object.
+從 `topic_list` 對象中解構出 `topics` 數組。
 
 # --hints--
 
-You should use `const` to destructure the `topics` variable from the `topic_list` object.
+你應該使用 `const` 從 `topic_list` 對象中解構 `topics` 變量。
 
 ```js
 assert(code.match(/\s*const\s*\{\s*topics\s*\}\s*=\s*topic_list\s*;?\s*/g));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
index 05ad426544a..ad11d17544b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
@@ -7,33 +7,33 @@ dashedName: step-14
 
 # --description--
 
-Now it is time to start populating the data inside the `postsContainer`.
+現在是時候開始填充 `postsContainer` 內的數據了。
 
-Start by calling the `map()` method on your `topics` array. For the callback function, use an empty arrow function that takes `item` as a parameter.
+首先對你的 `topics` 數組調用 `map()` 方法。 對於回調函數，請使用一個空箭頭函數，並將 `item` 作爲參數。
 
-Then assign the result of the `map()` method to `postsContainer.innerHTML`.
+然後將 `map()` 方法的結果賦值給 `postsContainer.innerHTML`。
 
 # --hints--
 
-You should use the `map()` method on the `topics` array.
+你應該對 `topics` 數組使用 `map()` 方法。
 
 ```js
 assert.match(code, /topics\.map\(.*/);
 ```
 
-You should add a callback function to the `map()` method that has `item` for the parameter name.
+你應該給 `map()` 方法添加一個回調函數，該回調函數的參數名稱應該是 `item`。
 
 ```js
 assert.match(code, /topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>/g);
 ```
 
-The body of the callback function should be empty.
+回調函數的函數體應爲空。
 
 ```js
 assert.match(code, /topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>\s*{\s*}/g);
 ```
 
-You should assign the result of the `map()` method to `postsContainer.innerHTML`.
+你應該將 `map()` 方法的結果賦值給 `postsContainer.innerHTML`。
 
 ```js
 assert.match(code, /postsContainer\.innerHTML\s*=\s*topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>\s*{\s*}/g);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
index 5d342d9756c..1923a18f833 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
@@ -7,7 +7,7 @@ dashedName: step-15
 
 # --description--
 
-Inside the `map` method, destructure the following properties from the `item` object:
+在 `map` 方法中，從 `item` 對象中解構出以下屬性：
 
 * `id`
 * `title`
@@ -20,7 +20,7 @@ Inside the `map` method, destructure the following properties from the `item` ob
 
 # --hints--
 
-You should destructure the `id`, `title`, `views`, `posts_count`, `slug`, `posters`, `category_id`, `bumped_at` properties from the `item` object.
+你應該從 `item` 對象中解構 `id`、`title`、`views`、`posts_count`、`slug`、`posters`、`category_id`、`bumped_at` 屬性。
 
 ```js
 assert.match(code, /const\s*\{\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,?\s*\}\s*=\s*item/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
index 6ad791efbda..3d32845649b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
@@ -7,11 +7,11 @@ dashedName: step-18
 
 # --description--
 
-Inside your `tr` element, add five empty `td` elements.
+在你的 `tr` 元素內部，添加五個空的 `td` 元素。
 
 # --hints--
 
-Your `tr` element should contain five `td` elements.
+你的 `tr` 元素應該包含五個 `td` 元素。
 
 ```js
 assert(/return\s*`\s*<tr>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<\/tr>\s*`/.test(code));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
index 2a0d609fdf2..c1bf984ff9e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
@@ -1,19 +1,19 @@
 ---
 id: 6444062a33ab4c03d0c2e9f5
-title: Step 24
+title: 步驟 24
 challengeType: 0
 dashedName: step-24
 ---
 
 # --description--
 
-To display the time since the last post, call the `timeAgo` function and pass in the `bumped_at` variable for the argument. Place this function call inside the last `td` element.
+要顯示距離上個帖子的時間，請調用 `timeAgo` 函數，並傳入 `bumped_at` 變量作爲參數。 將此函數調用放在最後一個 `td` 元素中。
 
-Once you make those changes, scroll across the table to see the new values displayed in the `Activity` column.
+一旦你進行了這些更改，請滾動表格以查看 `Activity` 欄中顯示的新值。
 
 # --hints--
 
-You should call the `timeAgo` function with the argument of `bumped_at` in the last `td` element.
+你應該在最後一個 `td` 元素中以 `bumped_at` 作爲參數調用 `timeAgo` 函數。
 
 ```js
 assert(code.match(/<tr>(?:.*<td>.*<\/td>\s*){2}<td>\s*\$\{\s*timeAgo\(\s*bumped_at\s*\)\s*\}\s*<\/td>\s*<\/tr>/s));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
index 0dd6b849e77..06dd6e8a23f 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
@@ -1,47 +1,47 @@
 ---
 id: 64440a50d076c204051f2cc0
-title: Step 25
+title: 步驟 25
 challengeType: 0
 dashedName: step-25
 ---
 
 # --description--
 
-You need a function to convert view counts to a more readable format. For example, if the view count is `1000`, it should display as `1k` and if the view count is `100,000` it should display as `100k`.
+你需要一個函數來將瀏覽量轉換爲更易讀的格式。 例如，如果瀏覽量是 `1000`，應該顯示爲 `1k`，如果瀏覽量是 `100,000`，應該顯示爲 `100k`。
 
-Create a `viewCount` function with a `views` parameter. If `views` is greater than or equal to `1000`, return a string with the `views` value divided by `1000` and the letter `k` appended to it. Make sure to round `views / 1000` down to the nearest whole number.
+創建一個帶有 `views` 參數的 `viewCount` 函數。 如果 `views` 大於或等於 `1000`，則返回一個字符串，其中 `views` 的值除以 `1000` 並附加字母 `k`。 確保將 `views / 1000` 向下舍入到最接近的整數。
 
-Otherwise, return the `views` value.
+否則，返回 `views` 值。
 
-For example, if `views` is `1000` your return value should be the string `1k`.
+例如，如果 `views` 是 `1000`，你的返回值應該是字符串 `1k`。
 
 # --hints--
 
-You should have a function called `viewCount`.
+你應該有一個名爲 `viewCount` 的函數。
 
 ```js
 assert.isFunction(viewCount);
 ```
 
-Your `viewCount` function should have a parameter called `views`.
+你的 `viewCount` 函數應該有一個名爲 `views` 的參數。
 
 ```js
 assert.match(viewCount.toString(), /\(?views\)?/);
 ```
 
-Your `viewCount` function should return the string `1k` when `views` is `1000`.
+你的 `viewCount` 函數在 `views` 是 `1000` 時應返回字符串 `1k`。
 
 ```js
 assert.strictEqual(viewCount(1000), "1k");
 ```
 
-Your `viewCount` function should return the string `100k` when `views` is `100000`.
+你的 `viewCount` 函數在 `views` 值爲 `100000` 時應返回字符串 `100k`。
 
 ```js
 assert.strictEqual(viewCount(100000), "100k");
 ```
 
-Your `viewCount` function should return the correct string when `views` is greater than or equal to `1000`.
+當 `views` 大於或等於 `1000` 時，`viewCount` 函數應返回正確的字符串。
 
 ```js
 assert.strictEqual(viewCount(10000), "10k");
@@ -49,13 +49,13 @@ assert.strictEqual(viewCount(35000), "35k");
 assert.strictEqual(viewCount(99999), "99k");
 ```
 
-Your `viewCount` function should return `views` when `views` is `200`.
+當 `views` 是 `200` 時，你的 `viewCount` 函數應該返回 `views`。
 
 ```js
 assert.strictEqual(viewCount(200), 200);
 ```
 
-Your `viewCount` function should return `views` when `views` is less than `1000`.
+你的 `viewCount` 函數應在 `views` 小於 `1000` 時返回 `views`。
 
 ```js
 assert.strictEqual(viewCount(999), 999);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
index 11695823736..ff00a4fed20 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
@@ -1,30 +1,30 @@
 ---
 id: 644fb1d7f0257702a0c935cf
-title: Step 41
+title: 步驟 41
 challengeType: 0
 dashedName: step-41
 ---
 
 # --description--
 
-Next, return an anchor element inside template literals. For the `href` attribute, assign the value of the `url` constant.
+接下來，在模板字面量中返回一個錨元素。 對於 `href` 屬性，賦值爲 `url` 常量的值。
 
 # --hints--
 
-You should return an anchor element inside template literals.
+你應該在模板字面量中返回一個錨元素。
 
 ```js
 assert.match(code, /return\s+`<a[^>]*>.*<\/a>`/)
 ```
 
-You should add the `href` attribute inside the opening anchor tag.
+你應該在開始錨標籤裏面添加 `href` 屬性。
 
 ```js
 const anchorTagWithHref = /return\s+`<a[^>]*href\s*=\s*('|")[^'"]*\1[^>]*>.*<\/a>`/g;
 assert(code.match(anchorTagWithHref));
 ```
 
-You should set the value of the `href` attribute to `${url}`.
+你應該將 `href` 屬性的值設置爲 `${url}`。
 
 ```js
 const hrefValue = /return\s+`<a[^>]*href\s*=\s*('|")\s*\${url}\s*\1[^>]*>.*<\/a>`/g;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
index 596401a515e..70935912ccc 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
@@ -1,19 +1,19 @@
 ---
 id: 645763874fd6d901c273db29
-title: Step 43
+title: 步驟 43
 challengeType: 0
 dashedName: step-43
 ---
 
 # --description--
 
-Inside the first `td` element, add an embedded expression `${}`. Inside that expression, call the `forumCategory` function with the argument of `category_id`.
+在第一個 `td` 元素裏面，添加一個內嵌表達式 `${}`。 在該表達式中，使用 `category_id` 作爲參數來調用 `forumCategory` 函數。
 
-Now, you should see a category displayed underneath each post topic.
+現在，你應該在每個帖子主題下看到一個類別。
 
 # --hints--
 
-You should call the `forumCategory` function with the argument of `category_id`
+你應該用 `category_id` 參數調用 `forumCategory` 函數。
 
 ```js
 const forumCategoryValue = /\s*\${\s*forumCategory\(\s*category_id\s*\)\s*}/g;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
index 7e0f6afa5a9..69a541ab033 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
@@ -1,25 +1,25 @@
 ---
 id: 645f06144bc0dc0143a5a3a2
-title: Step 44
+title: 步驟 44
 challengeType: 0
 dashedName: step-44
 ---
 
 # --description--
 
-Each forum post will include a list of user avatar images which represent all of the users participating in the conversation for that topic.
+每個論壇帖子將包括一組用戶頭像圖像，代表參與該話題討論的所有用戶。
 
-Start by creating an arrow function called `avatars`, with two parameters called `posters` and `users`.
+首先創建一個名爲 `avatars` 的箭頭函數，帶有兩個參數 `posters` 和 `users`。
 
 # --hints--
 
-You should have an empty arrow function called `avatars`.
+你應該有一個名爲 `avatars` 的空箭頭函數。
 
 ```js
 assert.match(code, /const\s+avatars\s*=\s*\([\s\S]*\)\s*=>\s*{\s*}/);
 ```
 
-You should have the parameters named `posters` and `users` in the function named `avatars`.
+你應該在名爲 `avatars` 的函數中將參數命名爲 `posters` 和 `users`。
 
 ```js
 assert.match(code, /const\s+avatars\s*=\s*\(\s*(posters|users)\s*,\s*(posters|users)\s*\)\s*=>\s*{\s*}/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
index bdff26ea234..e9d4b763ae8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
@@ -1,17 +1,17 @@
 ---
 id: 645f7231271ab1012bc659b8
-title: Step 47
+title: 步驟 47
 challengeType: 0
 dashedName: step-47
 ---
 
 # --description--
 
-Next, check if the user exists. Add an `if` statement with `user` for the condition.
+接下來，檢查用戶是否存在。 添加一個以 `user` 爲條件的 `if` 語句。
 
 # --hints--
 
-You should create an `if` statement with the condition of `user`.
+你應該創建一個條件爲 `user` 的 `if` 語句。
 
 ```js
 assert(code.match(/if\s*\(\s*user\s*\)\s*{\s*/));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
index 2075856e463..58fc4b76c7d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
@@ -1,33 +1,33 @@
 ---
 id: 645f764c37de33015ded1273
-title: Step 48
+title: 步驟 48
 challengeType: 0
 dashedName: step-48
 ---
 
 # --description--
 
-To customize the avatar's size, you can set it to a value of `30`.
+要自定義頭像的大小，你可以將其設置爲 `30`。
 
-Start by creating a constant called `avatar`. Then assign it the result of using the `replace` method on `user.avatar_template`.
+首先創建一個名爲 `avatar` 的常量。 然後使用 `replace` 方法對 `user.avatar_template` 進行處理並將結果賦值給它。
 
-For the `replace` method, use `/{size}/` for the first argument and the number `30` for the second argument.
+對於 `replace` 方法，使用 `/{size}/` 作爲第一個參數，使用數字 `30` 作爲第二個參數。
 
 # --hints--
 
-You should have a constant called `avatar`.
+你應該有一個名爲 `avatar` 的常量。
 
 ```js
 assert(code.match(/const\s+avatar\s*=/));
 ```
 
-You should assign `user.avatar_template.replace()` to your `avatar` constant.
+你應該將 `user.avatar_template.replace()` 賦值給你的 `avatar` 常量。
 
 ```js
 assert(code.match(/const\s+avatar\s*=\s*user\.avatar_template\.replace\(\s*.*\s*\)/));
 ```
 
-You should have `/{size}/` for the first argument and the number `30` for the second argument for the `replace` method.
+你應該在 `replace` 方法中將第一個參數設爲 `/{size}/`，第二個參數設爲數字 `30`。
 
 ```js
 assert(code.match(/const\s+avatar\s*=\s*user\.avatar_template\.replace\(\s*([/'"]){size}\1\s*,\s*30\s*\)/));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
index e282057b308..eacefc30410 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
@@ -1,29 +1,29 @@
 ---
 id: 645f7879ebbdb201892e55e1
-title: Step 49
+title: 步驟 49
 challengeType: 0
 dashedName: step-49
 ---
 
 # --description--
 
-Next, you will construct the `userAvatarUrl`.
+接下來，你將構建 `userAvatarUrl`。
 
-Start by creating a constant called `userAvatarUrl`. Then use a ternary operator to check if `avatar` starts with `"/user_avatar/"`.
+首先創建一個名爲 `userAvatarUrl` 的常量。 Then use a ternary operator to check if `avatar` starts with `"/user_avatar/"`.
 
-If so, use the `concat` method to concatenate `avatar` to `avatarUrl`. Otherwise return `avatar`.
+如果是這樣，使用 `concat` 方法將 `avatar` 連接到 `avatarUrl`。 否則返回 `avatar`。
 
-This will ensure the avatar URL is correctly formed whether it's a relative or absolute URL.
+這將確保頭像 URL 無論是相對 URL 還是絕對 URL 都能正確形成。
 
 # --hints--
 
-You should have a constant named `userAvatarUrl`.
+你應該有一個名爲 `userAvatarUrl` 的常量。
 
 ```js
 assert(code.match(/const\s+userAvatarUrl\s*=/));
 ```
 
-Your `ternary` should check if `avatar` starts with `"/user_avatar/"` and return `avatarUrl.concat(avatar)` or `avatar`.
+你的 `ternary` 應該檢查 `avatar` 是否以 `"/user_avatar/"` 開頭，並返回 `avatarUrl.concat(avatar)` 或者 `avatar`。
 
 ```js
 assert(code.match(/const\s+userAvatarUrl\s*=\s*(?:avatar\.startsWith\(\s*('|")\/user_avatar\/\1\s*\)|\/\^\\\/user_avatar\\\/\/\.test\(\s*avatar\s*\))\s*\?\s*avatarUrl\.concat\(\s*avatar\s*\)\s*:\s*avatar/));
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
index 314d50057e6..4e2baf5cb06 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
@@ -1,28 +1,28 @@
 ---
 id: 645f8615fa144d01c476b22c
-title: Step 50
+title: 步驟 50
 challengeType: 0
 dashedName: step-50
 ---
 
 # --description--
 
-Lastly, you will need to return the image for the user avatar.
+最後，你需要返回用戶頭像的圖片。
 
-Start by adding a `return` followed by a set of template literals. Inside the template literals, add an `img` element.
+首先添加一個 `return`，後面是模板字面量。 在模板字面量中添加一個 `img` 元素。
 
-Inside the `img` tag, add a `src` attribute with the value of `${userAvatarUrl}`. For the `alt` attribute, add a value of `${user.name}`.
+Inside the `img` tag, add a `src` attribute with the value of `${userAvatarUrl}`. 對於 `alt` 屬性，添加 `${user.name}` 的值。
 
 # --hints--
 
-You should return an empty template literal.
+你應該返回一個空的模板字符串。
 
 ```js
 const emptyTemplateLiteral = /return\s*`(.*)`/;
 assert(code.match(emptyTemplateLiteral));
 ```
 
-You should have an `img` element inside the template literal.
+你應該在模板字面量中包含一個 `img` 元素。
 
 ```js
 const imgTag = /return\s*`<img[^>]*\\?>`/g;
@@ -36,21 +36,21 @@ const imgTagWithSrc = /return\s*`<img[^>]*src\s*=\s*('|")[^'"]*\1[^>]*\\?>`/g;
 assert(code.match(imgTagWithSrc));
 ```
 
-You should set the value for the `src` attribute to the constant named `userAvatarUrl`.
+你應該將 `src` 屬性的值設置爲名爲 `userAvatarUrl` 的常量。
 
 ```js
 const srcValue = /return\s*`<img[^>]*src\s*=\s*('|")\s*\${userAvatarUrl}\s*\1[^>]*\\?>`/g;
 assert(code.match(srcValue));
 ```
 
-You should have an `alt` attribute after the `src` attribute.
+在 `src` 屬性之後應該有一個 `alt` 屬性。
 
 ```js
 const imageTagWithSrcAndAlt = /return\s*`<img[^>]*src\s*=\s*('|")[^'"]*\1[^>]*alt\s*=\s*('|")[^'"]*\2[^>]*\\?>`/g;
 assert(code.match(imageTagWithSrcAndAlt));
 ```
 
-You should set the value of the `alt` attribute to the constant named `user.name`.
+你應該將 `alt` 屬性的值設置爲名爲 `user.name` 的常量。
 
 ```js
 const altValue = /return\s*`<img[^>]*src\s*=\s*('|")\s*\${userAvatarUrl}\s*\1[^>]*alt\s*=\s*('|")\s*\${user\.name}\s*\2[^>]*\\?>`/g;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
index 853aaf943db..d15562909f5 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
@@ -1,26 +1,26 @@
 ---
 id: 646474a88d0d4a016f895ba8
-title: Step 52
+title: 步驟 52
 challengeType: 0
 dashedName: step-52
 ---
 
 # --description--
 
-For the remaining steps, you will add the functionality to display the user avatars.
+在接下來的步驟中，你將添加顯示用戶頭像的功能。
 
-Inside the second `td` element, add a `div` element with a class name of `avatar-container`.
+在第二個 `td` 元素內，添加一個類名爲 `avatar-container` 的 `div` 元素。
 
 # --hints--
 
-You should have a `div` element inside the second `td` element.
+你應該在第二個 `td` 元素內有一個 `div` 元素。
 
 ```js
 const joinTest =  /<div\b[^>]*>([\s\S]*?)<\/div>/gm;
 assert(code.match(joinTest));
 ```
 
-Your opening `div` tag should have a class attribute with the value of `avatar-container`.
+你的 `div` 標籤應該有一個 class 屬性，值爲 `avatar-container`。
 
 ```js
 const divRegexTest = /<div\b[^>]*\bclass\s*=\s*"[^"]*\bavatar-container\b[^"]*"[^>]*>([\s\S]*?)<\/div>/gm;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
index 67618fe3277..5e1fa0fdeee 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
@@ -1,26 +1,26 @@
 ---
 id: 64648c3254e52901e36e7703
-title: Step 53
+title: 步驟 53
 challengeType: 0
 dashedName: step-53
 ---
 
 # --description--
 
-Inside the `div` element, call the `avatars` function and pass in the arguments of `posters` and `users`.
+在 `div` 元素內部，調用 `avatars` 函數，並傳入 `posters` 和 `users` 作爲參數。
 
-Now you should see the avatars displayed on the page.
+現在你應該能看到頁面上顯示的頭像了。
 
 # --hints--
 
-You should call the function named `avatars`.
+你應該調用名爲 `avatars` 的函數。
 
 ```js
 const avatarsTest = /\$\{\s*avatars\s*\(\s*[^)]*\s*\)\s*\}/gm;
 assert(code.match(avatarsTest));
 ```
 
-Your function call should have the arguments of `posters` and `users`.
+你的函數調用應包含參數 `posters` 和 `users`。
 
 ```js
 const avatarsTest = /\$\{\s*avatars\s*\(\s*posters\s*,\s*users\s*\)\s*\}/gm;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
index 65f4243e8dd..c9d14f96645 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
@@ -1,21 +1,21 @@
 ---
 id: 646494e11d0cab03caee204c
-title: Step 54
+title: 步驟 54
 challengeType: 0
 dashedName: step-54
 ---
 
 # --description--
 
-Your project is almost complete. It is just missing one last piece.
+你的項目快完成了。 就差最後一個部分了。
 
-Users should be able to click on any post title and be directed to the actual post on the [freeCodeCamp forum](https://forum.freecodecamp.org/).
+用戶應該能夠點擊任何帖子標題，並被引導到 [freeCodeCamp 論壇](https://forum.freecodecamp.org/) 上的實際帖子。
 
-Start by changing the existing paragraph element inside the first `td` element to be an anchor element.
+首先將第一個 `td` 元素內的現有段落元素改爲錨元素。
 
 # --hints--
 
-You should replace the `p` element with an `a` element.
+你應該將 `p` 元素替換爲 `a` 元素。
 
 ```js
 const regex = /<a\s+class\s*=\s*('|")post-title\1\s*>(?:.|\n)*?<\/a>/;
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
index c14f55e1d30..95e05fbef59 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
@@ -1,25 +1,25 @@
 ---
 id: 64649b108df035051cb2ba2d
-title: Step 55
+title: 步驟 55
 challengeType: 0
 dashedName: step-55
 ---
 
 # --description--
 
-For the opening `a` tag, set the `target` attribute to `_blank`. Then, set the `href` attribute to `${forumTopicUrl}${slug}/${id}`.
+對於開始 `a` 標籤，將 `target` 屬性設置爲 `_blank`。 然後，將 `href` 屬性設置爲 `${forumTopicUrl}${slug}/${id}`。
 
-And with those changes, your freeCodeCamp forum leaderboard project is now complete!
+有了這些更改，你的 freeCodeCamp 論壇排行榜項目現在已經完成了！
 
 # --hints--
 
-Your opening anchor tag should have a `target` attribute set to `_blank`.
+你的開始錨標籤應將 `target` 屬性設置爲 `_blank`。
 
 ```js
 assert.match(code, /<a\s+(?:[^>]*\s+)?target\s*=\s*('|")_blank\1(?:\s+[^>]*)?>.*<\/a>/s);
 ```
 
-Your opening anchor tag should have an `href` attribute set to `${forumTopicUrl}${slug}/${id}`.
+你的開始錨標籤應該設置一個 `href` 屬性，其值爲 `${forumTopicUrl}${slug}/${id}`。
 
 ```js
 assert.match(code, /<a\s+(?:[^>]*\s+)?href\s*=\s*('|")\${forumTopicUrl}\${slug}\/\${id}\1(?:\s+[^>]*)?>.*<\/a>/s);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
index fb63baf4149..a07e56313a8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
@@ -7,33 +7,33 @@ dashedName: step-1
 
 # --description--
 
-In this project, you will build a freeCodeCamp forum leaderboard that displays the latest topics, users, and replies from the [freeCodeCamp forum](https://forum.freecodecamp.org/). HTML和CSS已經爲您準備好了。 請隨意使用。
+在這個項目中，你將構建一個 freeCodeCamp 論壇排行榜，顯示來自 [freeCodeCamp論壇](https://forum.freecodecamp.org/) 的最新話題、用戶和回覆。 HTML和CSS已經爲您準備好了。 請隨意使用。
 
-When you are ready, use `const` to declare a `forumLatest` variable and assign it the string `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json`.
+當你準備好時，使用 `const` 聲明一個 `forumLatest` 變量，並將 `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` 字符串賦值給它。
 
-Below that, create another `const` variable called `forumTopicUrl` and assign it the string `https://forum.freecodecamp.org/t/`.
+在那下面創建另一個 `const` 變量，命名爲 `forumTopicUrl`，並將字符串 `https://forum.freecodecamp.org/t/` 賦值給它。
 
 # --hints--
 
-You should declare a `forumLatest` variable with `const`.
+你應該使用 `const` 聲明一個 `forumLatest` 變量。
 
 ```js
 assert.match(code, /const\s+forumLatest\s*=/);
 ```
 
-You should assign `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` to your `forumLatest` variable.
+你應該把 `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` 賦值給你的 `forumLatest` 變量。
 
 ```js
 assert.match(code, /const\s+forumLatest\s*=\s*('|")https:\/\/cdn\.freecodecamp\.org\/curriculum\/forum-latest\/latest\.json\1\s*/);
 ```
 
-You should declare a `forumTopicUrl` variable with `const`.
+你應該用 `const` 聲明一個 `forumTopicUrl` 變量。
 
 ```js
 assert.match(code, /const\s+forumTopicUrl\s*=/);
 ```
 
-You should assign `https://forum.freecodecamp.org/t/` to your `forumTopicUrl` variable.
+你應該將 `https://forum.freecodecamp.org/t/` 分配給你的 `forumTopicUrl` 變量。
 
 ```js
 assert.match(code, /const\s+forumTopicUrl\s*=\s*('|")https:\/\/forum\.freecodecamp\.org\/t\/\1\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
index 2fead582d2e..d9695c43daa 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
@@ -7,31 +7,31 @@ dashedName: step-2
 
 # --description--
 
-Next, create a `const` variable called `forumCategoryUrl` and assign it the string `https://forum.freecodecamp.org/c/`.
+接下來，創建一個 `const` 變量，名爲 `forumCategoryUrl`，並將其賦值爲字符串 `https://forum.freecodecamp.org/c/`。
 
-Below that, create another `const` variable called `avatarUrl` and assign it the string `https://sea1.discourse-cdn.com/freecodecamp`.
+在其下方，創建另一個 `const` 變量，名爲 `avatarUrl`，並將其賦值爲字符串 `https://sea1.discourse-cdn.com/freecodecamp`。
 
 # --hints--
 
-You should declare a `forumCategoryUrl` variable with `const`.
+你應該用 `const` 聲明一個 `forumCategoryUrl` 變量。
 
 ```js
 assert.match(code, /const\s+forumCategoryUrl\s*=/);
 ```
 
-You should assign `https://forum.freecodecamp.org/c/` to your `forumCategoryUrl` variable.
+你應該將 `https://forum.freecodecamp.org/c/` 分配給你的 `forumCategoryUrl` 變量。
 
 ```js
 assert.match(code, /const\s+forumCategoryUrl\s*=\s*('|")https:\/\/forum\.freecodecamp\.org\/c\/\1\s*/);
 ```
 
-You should declare an `avatarUrl` variable with `const`.
+你應該使用 `const` 聲明一個 `avatarUrl` 變量。
 
 ```js
 assert.match(code, /const\s+avatarUrl\s*=/);
 ```
 
-You should assign `https://sea1.discourse-cdn.com/freecodecamp` to your `avatarUrl` variable.
+你應該將 `https://sea1.discourse-cdn.com/freecodecamp` 分配給你的 `avatarUrl` 變量。
 
 ```js
 assert.match(code, /const\s+avatarUrl\s*=\s*('|")https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\1\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
index beab207bee1..70f66a1fb1d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
@@ -7,27 +7,27 @@ dashedName: step-9
 
 # --description--
 
-If there is an error from the `fetch` call, the `catch` block will handle it.
+如果 `fetch` 調用發生錯誤， `catch` 塊將會處理它。
 
-Inside the `catch` block, add a `console.log` to log the `err` parameter.
+在 `catch` 塊中，添加 `console.log` 以記錄 `err` 參數。
 
-Also, remove your `console.log(data);` from your `try` block now that you understand what is being returned from the `fetch` call.
+此外，既然你已經瞭解了 `fetch` 調用返回的內容，現在可以從你的 `try` 塊中刪除 `console.log(data);`。
 
 # --hints--
 
-You should use `console.log` to log the `err` variable.
+你應該使用 `console.log` 來記錄 `err` 變量。
 
 ```js
 assert.match(code, /\s*console\.log\(\s*err\s*\)/);
 ```
 
-Your `console.log` should be inside the `catch` block.
+你的 `console.log` 應該放在 `catch` 塊裏面。
 
 ```js
 assert.match(code, /\s*try\s*{[^}]*\s*}\s*catch\s*\(\s*err\s*\)\s*{[^}]*\s*console\.log\(\s*err\s*\)[^}]*}/);
 ```
 
-You should remove `console.log(data);` from the `try` block.
+你應該從 `try` 塊中移除 `console.log(data);`。
 
 ```js
 assert.notMatch(code, /\s*console\.log\(\s*data\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
index 4e215f357c9..56777c526ce 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
@@ -1,25 +1,25 @@
 ---
 id: 6576076879130f6cf7426e82
-title: Step 27
+title: 步驟 27
 challengeType: 0
 dashedName: step-27
 ---
 
 # --description--
 
-Each of the forum topics includes a category like Python or JavaScript. In the next few steps, you will build out a category object which holds all of the forum categories and `classNames` for the styling.
+每個論壇主題都包括一個類別，比如 Python 或 JavaScript。 在接下來的幾個步驟中，你將構建一個類別對象，該對象包含所有論壇類別和用於樣式的 `classNames`。
 
-Start by creating a new constant called `allCategories` and assign it the value of an empty object.
+首先創建一個名爲 `allCategories` 的新常量，並將其賦值爲空對象。
 
 # --hints--
 
-You should have a constant called `allCategories`.
+你應該有一個名爲 `allCategories` 的常量。
 
 ```js
 assert.match(code, /const\s+allCategories\s*=/)
 ```
 
-You should assign an empty object to the `allCategories` variable.
+你應該給 `allCategories` 變量賦一個空對象。
 
 ```js
 assert.match(code, /const\s+allCategories\s*=\s*{\s*}\s*/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
index c1b58274d42..f0d542c2a04 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
@@ -1,49 +1,49 @@
 ---
 id: 65760954561c726e832a0cc8
-title: Step 28
+title: 步驟 28
 challengeType: 0
 dashedName: step-28
 ---
 
 # --description--
 
-Inside your `allCategories` object, add a new key for the number `299` with a value of an empty object.
+在你的 `allCategories` 對象中，添加一個新的鍵 `299`，它的值爲空對象。
 
-Inside that object, add a property with a key of `category` and a string value of `Career Advice`. Below that property, add another key called `className` with a string value of `career`.
+在那個對象內部，添加一個鍵爲 `category`，值爲 `Career Advice` 的屬性。 在該屬性下面，再添加一個名爲 `className` 的鍵，其值爲字符串 `career`。
 
 # --hints--
 
-Your `allCategories` object should have a `299` property.
+你的 `allCategories` 對象應該有一個 `299` 屬性。
 
 ```js
 assert.property(allCategories, '299');
 ```
 
-Your `299` value should be an object.
+你的 `299` 值應該是一個對象。
 
 ```js
 assert.isObject(allCategories['299'])
 ```
 
-Your `299` object should have a `category` property.
+你的 `299` 對象應具有一個 `category` 屬性。
 
 ```js
 assert.property(allCategories['299'], 'category');
 ```
 
-Your `category` property should be set to the string `Career Advice`.
+你的 `category` 屬性應該設置爲字符串 `Career Advice`。
 
 ```js
 assert.equal(allCategories["299"].category, 'Career Advice');
 ```
 
-Your `299` object should have a `className` property.
+你的 `299` 對象應該有一個 `className` 屬性。
 
 ```js
 assert.property(allCategories['299'], 'className');
 ```
 
-Your `className` property should be set to the string `career`.
+你的 `className` 屬性應設置爲字符串 `career`。
 
 ```js
 assert.equal(allCategories["299"].className, 'career');
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
index 96230ca9d57..8b4123802d8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
@@ -1,51 +1,51 @@
 ---
 id: 65760ce115eb06716baeb361
-title: Step 29
+title: 步驟 29
 challengeType: 0
 dashedName: step-29
 ---
 
 # --description--
 
-Add a new key for the number `409` with a value of an empty object.
+添加一個新的鍵爲 `409`，值爲一個空對象。
 
-Inside that object, add a property with a key of `category` and a string value of `Project Feedback`.
+在那個對象內部，添加一個鍵爲 `category`、值爲 `Project Feedback` 的字符串屬性。
 
-Below that property, add another key called `className` with a string value of `feedback`.
+在該屬性下，添加另一個名爲 `className` 的鍵，並賦值爲字符串 `feedback`。
 
 # --hints--
 
-Your `allCategories` object should have a `409` property.
+你的 `allCategories` 對象應該有一個 `409` 屬性。
 
 ```js
 assert.property(allCategories, '409');
 ```
 
-Your `409` value should be an object.
+你的 `409` 值應該是一個對象。
 
 ```js
 assert.isObject(allCategories['409'])
 ```
 
-Your `409` object should have a `category` property.
+你的 `409` 對象應該有一個 `category` 屬性。
 
 ```js
 assert.property(allCategories['409'], 'category');
 ```
 
-Your `category` property should be set to the string `Project Feedback`.
+你的 `category` 屬性應設置爲字符串 `Project Feedback`。
 
 ```js
 assert.equal(allCategories["409"].category, 'Project Feedback');
 ```
 
-Your `409` object should have a `className` property.
+你的 `409` 對象應該有一個 `className` 屬性。
 
 ```js
 assert.property(allCategories['409'], 'className');
 ```
 
-Your `className` property should be set to the string `feedback`.
+你的 `className` 屬性應該設置爲字符串 `feedback`。
 
 ```js
 assert.equal(allCategories["409"].className, 'feedback');
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
index e66b5b6c5a2..c03a0b6c456 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
@@ -1,51 +1,51 @@
 ---
 id: 65760de70283687288fe70cf
-title: Step 30
+title: 步驟 30
 challengeType: 0
 dashedName: step-30
 ---
 
 # --description--
 
-Add a new key for the number `417` with a value of an empty object.
+爲數字 `417` 添加一個新的鍵，值爲空對象。
 
-Inside that object, add a property with a key of `category` and a string value of `freeCodeCamp Support`.
+在該對象中，添加一個鍵爲 `category` 和值爲字符串 `freeCodeCamp Support` 的屬性。
 
-Below that property, add another key called `className` with a string value of `support`.
+在該屬性下，添加另一個名爲 `className` 的鍵，其字符串值爲 `support`。
 
 # --hints--
 
-Your `allCategories` object should have a `417` property.
+你的 `allCategories` 對象應該有一個 `417` 屬性。
 
 ```js
 assert.property(allCategories, '417');
 ```
 
-Your `417` value should be an object.
+你的 `417` 值應該是一個對象。
 
 ```js
 assert.isObject(allCategories['417'])
 ```
 
-Your `417` object should have a `category` property.
+你的 `417` 對象應該有一個 `category` 屬性。
 
 ```js
 assert.property(allCategories['417'], 'category');
 ```
 
-Your `category` property should be set to the string `freeCodeCamp Support`.
+你的 `category` 屬性應設置爲字符串 `freeCodeCamp Support`。
 
 ```js
 assert.equal(allCategories["417"].category, 'freeCodeCamp Support');
 ```
 
-Your `417` object should have a `className` property.
+你的 `417` 對象應有一個 `className` 屬性。
 
 ```js
 assert.property(allCategories['417'], 'className');
 ```
 
-Your `className` property should be set to the string `support`.
+你的 `className` 屬性應被設置爲字符串 `support`。
 
 ```js
 assert.equal(allCategories["417"].className, 'support');
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
index f32e731ab9c..c41b999911d 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
@@ -27,13 +27,13 @@ if (condition) {
 assert.match(__helpers.removeJSComments(code), /if/);
 ```
 
-Your `if` statement should have `true` as the condition.
+你的 `if` 語句應以 `true` 作爲條件。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*true\s*\)/);
 ```
 
-Your `if` body should log `"Condition is true"`.
+你的 `if` 主體應記錄 `"Condition is true"`。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*true\s*\)\s*\{\s*console\.log\(\s*("|')Condition is true\1\s*\);?/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
index b80f639277e..c9fa728da7b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
@@ -7,11 +7,11 @@ dashedName: step-82
 
 # --description--
 
-The text is gone again! Empty strings evaluate to `false`, making them a <dfn>falsy value</dfn>. You will learn more about truthy and falsy values in future projects.
+文字又不見了！ 空字符串的計算結果爲 `false`，使其成爲 <dfn>假值</dfn>。 你將在未來的項目中瞭解有關真值和假值的更多信息。
 
-In addition to `if` statements, JavaScript also has <dfn>else if</dfn> statements. `else if` statements allow you to check multiple conditions in a single block of code.
+除了 `if` 語句之外，JavaScript 還有 <dfn>else if</dfn> 語句。 `else if` 語句允許你在單個代碼塊中檢查多個條件。
 
-Here is the syntax for an `else if` statement:
+以下是 `else if` 語句的語法：
 
 ```js
 if (condition1) {
@@ -23,27 +23,27 @@ if (condition1) {
 } 
 ```
 
-If the first condition is `false`, JavaScript will check the next condition in the chain. If the second condition is `false`, JavaScript will check the third condition, and so on.
+如果第一個條件爲 `false`，JavaScript 將檢查鏈中的下一個條件。 如果第二個條件爲 `false`，JavaScript 將檢查第三個條件，依此類推。
 
-Below your `if` statement, add an `else if` statement that checks if `5` is less than `10`. Then inside the body of the `else if` statement, log the string `"5 is less than 10"` to the console.
+在 `if` 語句下方，添加一個 `else if` 語句，檢查 `5` 是否小於 `10`。 然後在 `else if` 語句的主體內，將字符串 `"5 is less than 10"` 記錄到控制檯。
 
-Check the console to see the results.
+檢查控制檯來查看結果。
 
 # --hints--
 
-You should have an `else if` statement.
+你應該有一個 `else if` 語句。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s+if\s*\(/);
 ```
 
-Your `else if` statement should check if `5` is less than `10`.
+你的 `else if` 語句應檢查 `5` 是否小於 `10`。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s+if\s*\(\s*5\s*<\s*10\s*\)/);
 ```
 
-You should log the string `"5 is less than 10"` to the console.
+你應該將字符串 `"5 is less than 10"` 記錄到控制檯。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /console\.log\(\s*('|"|`)5\s+is\s+less\s+than\s+10\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
index 51eeda76adb..77dfe035f5c 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
@@ -7,11 +7,11 @@ dashedName: step-83
 
 # --description--
 
-Sometimes you will want to run different code when all of the `if...else if` conditions are `false`. You can do this by adding an `else` block.
+有時，你會希望在所有 `if...else if` 條件均爲 `false` 時運行不同的代碼。 你可以通過添加 `else` 塊來實現這一點。
 
-An `else` block will only evaluate if the conditions in the `if` and `else if` blocks are not met.
+僅當 `if` 和 `else if` 塊中的條件不滿足時，纔會評估 `else` 塊。
 
-Here the `else` block is added to the `else if` block.
+這裏將 `else` 塊添加到 `else if` 塊。
 
 ```js
 
@@ -25,19 +25,19 @@ if (condition) {
 }
 ```
 
-Add an `else` block to the `else if` block. Inside the `else` block, log the string `"This is the else block"` to the console.
+向 `else if` 塊添加 `else` 塊。 在 `else` 塊內，將字符串 `"This is the else block"` 記錄到控制檯。
 
-To see the results in the console, you can manually change the `<` in the `else if` statement to `>`. That will make the condition `false` and the `else` block will run.
+要在控制檯中查看結果，可以手動將 `else if` 語句中的 `<` 更改爲 `>`。 這將使得條件爲 `false` 並且 `else` 塊將運行。
 
 # --hints--
 
-You should have an `else` block.
+你應該有一個 `else` 塊。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s*\{/);
 ```
 
-Your `else` block should log the string `"This is the else block"` to the console.
+你的 `else` 塊應該將字符串 `"This is the else block"` 記錄到控制檯。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /console\.log\(\s*('|"|`)This\s+is\s+the\s+else\s+block\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
index f16086831f7..348215f95ba 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
@@ -7,37 +7,37 @@ dashedName: step-14
 
 # --description--
 
-Now that you have reviewed declaration and initialization, remove the code you wrote for your review.
+現在你已經檢查了聲明和初始化，刪除你爲檢查而編寫的代碼。
 
-Do not remove your `character` variable.
+不要刪除你的 `character` 變量。
 
 # --hints--
 
-You should not have a `profession` variable.
+你不應該有 `profession` 變量。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /let\s+profession/);
 ```
 
-You should not have a `age` variable.
+你不應該有 `age` 變量。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /let\s+age/);
 ```
 
-You should not have a `console.log` statement for `age`.
+你不應該對 `age` 有 `console.log` 語句。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*age\s*\);/);
 ```
 
-You should not have a `console.log` statement for `profession`.
+你不應該對 `profession` 有 `console.log` 語句。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*profession\s*\);/);
 ```
 
-You should still have your `character` variable.
+你應該仍然有你的 `character` 變量。
 
 ```js
 assert.strictEqual(character, "Hello");
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
index e5d45f40be2..131b252d994 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
@@ -7,57 +7,57 @@ dashedName: step-13
 
 # --description--
 
-Before moving forward, you should take a moment to review the concepts you have learned.
+在繼續之前，你應該花點時間複習一下已經學過的概念。
 
-Use the `let` keyword to declare a `profession` variable and an `age` variable. Initialize `profession` with the string `"teacher"`, but do not initialize `age` with any value.
+使用 `let` 關鍵字聲明 `profession` 變量和 `age` 變量。 使用字符串 `"teacher"` 初始化 `profession`，但不要使用任何值初始化 `age`。
 
-Log both of your variables to the console to see the results.
+將兩個變量記錄到控制檯以查看結果。
 
 # --hints--
 
-You should declare a `profession` variable.
+你應該聲明一個 `profession` 變量。
 
 ```js
 assert.match(code, /(?:var|let|const)\s+profession/);
 ```
 
-You should use `let` to declare the `profession` variable.
+你應該使用 `let` 來聲明 `profession` 變量。
 
 ```js
 assert.match(code, /let\s+profession/);
 ```
 
-You should assign the string `"teacher"` to the `profession` variable.
+你應該將字符串 `"teacher"` 分配給 `profession` 變量。
 
 ```js
 assert.strictEqual(profession, "teacher");
 ```
 
-You should declare an `age` variable.
+你應該聲明一個 `age` 變量。
 
 ```js
 assert.match(code, /(?:var|let|const)\s+age/);
 ```
 
-You should use `let` to declare the `age` variable.
+你應該使用 `let` 來聲明 `age` 變量。
 
 ```js
 assert.match(code, /let\s+age/);
 ```
 
-You should not assign a value to the `age` variable.
+你不應該爲 `age` 變量賦值。
 
 ```js
 assert.isUndefined(age);
 ```
 
-You should log `age` to the console.
+你應該將 `age` 記錄到控制檯。
 
 ```js
 assert.match(code, /console\.log\(\s*age\s*\);?/);
 ```
 
-You should log `profession` to the console.
+你應該將 `profession` 記錄到控制檯。
 
 ```js
 assert.match(code, /console\.log\(\s*profession\s*\);?/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
index 699e88dd661..e8dad5a51b9 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
@@ -8,13 +8,13 @@ dashedName: step-24
 
 # --description--
 
-In the last few steps, you learned all about working with arrays. Take a moment to review what you have learned.
+在前面幾個步驟中，你學習了有關使用數組的所有知識。 花一點時間複習一下你所學到的知識。
 
-Start by declaring a `cities` variable and initializing it as an array of the strings `"London"`, `"New York"`, and `"Mumbai"`. Then log that variable to the console.
+首先聲明一個 `cities` 變量，並將其初始化爲字符串 `"London"`、`"New York"` 和 `"Mumbai"` 的數組。 然後將該變量記錄到控制檯。
 
-After logging, change the last element of `cities` to the string `"Mexico City"`, then log the `cities` variable again.
+記錄完成後，將 `cities` 的最後一個元素更改爲字符串 `"Mexico City"`，然後再次記錄 `cities` 變量。
 
-When done correctly, you should see this output in the console.
+正確完成後，你應該在控制檯中看到此輸出。
 
 ```js
 [ "London", "New York", "Mumbai" ]
@@ -23,31 +23,31 @@ When done correctly, you should see this output in the console.
 
 # --hints--
 
-You should use `let` to declare a `cities` variable.
+你應該使用 `let` 來聲明 `cities` 變量。
 
 ```js
 assert.match(code, /let\s+cities/);
 ```
 
-You should assign an array of the strings `"London"`, `"New York"`, and `"Mumbai"` to the `cities` variable.
+你應該將字符串 `"London"`、`"New York"` 和 `"Mumbai"` 的數組分配給 `cities` 變量。
 
 ```js
 assert.match(code, /let\s+cities\s*=\s*\[\s*("|'|`)London\1\s*,\s*("|'|`)New York\2\s*,\s*("|'|`)Mumbai\3\s*\]/);
 ```
 
-You should use `console.log()` to log the entire `cities` array to the console.
+你應該使用 `console.log()` 將整個 `cities` 數組記錄到控制檯。
 
 ```js
 assert.match(code, /console\.log\(\s*cities\s*\)/);
 ```
 
-You should update the last element of the `cities` array to the string `"Mexico City"`. Remember that you can access the last element of an array using `array[array.length - 1]`.
+你應該將 `cities` 數組的最後一個元素更新爲字符串 `"Mexico City"`。 請記住，你可以使用 `array[array.length - 1]` 訪問數組的最後一個元素。
 
 ```js
 assert.deepEqual(cities, ["London", "New York", "Mexico City"]);
 ```
 
-You should have two `console.log(cities)` statements in your code.
+你的代碼中應該有兩個 `console.log(cities)` 語句。
 
 ```js
 assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log\(\s*cities\s*\)/g), 2);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
index 3c87d3d899c..fdb2cf46372 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
@@ -7,13 +7,13 @@ dashedName: step-25
 
 # --description--
 
-Now you are ready to move onto the next set of array lessons.
+現在你已準備好學習下一組數組課程。
 
-Remove all of your code from the previous step.
+刪除上一步中的所有代碼。
 
 # --hints--
 
-You should remove all references to your `cities` variable.
+你應該刪除對 `cities` 變量的所有引用。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /cities/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
index 4c0dc212daa..7e28e534b3f 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
@@ -7,40 +7,40 @@ dashedName: step-55
 
 # --description--
 
-Before moving on, take a moment to review how functions work.
+在繼續之前，請花點時間回顧一下函數的工作原理。
 
-Declare a function named `addTwoNumbers`. This function should take two arguments and return the sum of those two arguments.
+聲明一個名爲 `addTwoNumbers` 的函數。 該函數應該接受兩個參數並返回這兩個參數的總和。
 
-Then declare a `sum` variable and assign it the value of calling your `addTwoNumbers` function with `5` and `10` as the arguments. Log the `sum` variable to the console.
+然後聲明一個 `sum` 變量併爲其分配使用 `5` 和 `10` 作爲參數調用 `addTwoNumbers` 函數的值。 將 `sum` 變量記錄到控制檯。
 
 
 # --hints--
 
-You should have a function called `addTwoNumbers`.
+你應該有一個名爲 `addTwoNumbers` 的函數。
 
 ```js
 assert.isFunction(addTwoNumbers);
 ```
 
-Your function should return the sum of the two numbers.
+你的函數應該返回兩個數字的總和。
 
 ```js
 assert.strictEqual(addTwoNumbers(2,3), 5);
 ```
 
-You should declare a `sum` variable.
+你應該聲明一個 `sum` 變量。
 
 ```js
 assert.isDefined(sum);
 ```
 
-You should assign `sum` the value from calling the `addTwoNumbers` function with `5` and `10` for the arguments.
+你應該將以 `5` 和 `10` 作爲參數調用 `addTwoNumbers` 函數得到的值分配給 `sum`。
 
 ```js
 assert.strictEqual(sum, 15);
 ```
 
-You should log your `sum` variable.
+你應該記錄你的 `sum` 變量。
 
 ```js
 assert.match(code, /console\.log\(\s*sum\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
index 9e668aa9048..c31afd2734e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
@@ -7,23 +7,23 @@ dashedName: step-56
 
 # --description--
 
-With that quick review complete, you should remove your `addTwoNumbers` function, `sum` variable, and log statement.
+完成快速回顧後，你應該刪除 `addTwoNumbers` 函數、`sum` 變量和日誌語句。
 
 # --hints--
 
-You should not have a `addTwoNumbers` function in your code.
+你的代碼中不應該有 `addTwoNumbers` 函數。
 
 ```js
 assert.notMatch(code, /addTwoNumbers/);
 ```
 
-You should not have a `sum` variable in your code.
+你的代碼中不應該有 `sum` 變量。
 
 ```js
 assert.notMatch(code, /sum/);
 ```
 
-You should not log the `sum` variable.
+你不應該記錄 `sum` 變量。
 
 ```js
 assert.notMatch(code, /console\.log\(\s*sum\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
index 5e9a3979e85..ec6a5bab818 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
@@ -7,23 +7,23 @@ dashedName: step-1
 
 # --description--
 
-In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you.
+在這個項目中，你將構建一組足球隊卡片，並瞭解嵌套對象、對象解構、默認參數、事件監聽器和 switch 語句。 該項目的所有 HTML 和 CSS 均已爲你提供。
 
-Start by accessing the `id` called `"team"` from the HTML document and storing it in a `const` variable called `teamName`.
+首先從 HTML 文檔訪問名爲 `"team"` 的 `id`，並將其存儲在名爲 `teamName` 的 `const` 變量中。
 
-Remember, you can use the `getElementById` method for this.
+請記住，你可以爲此使用 `getElementById` 方法。
 
-_NOTE_: The numbers for the team are organized alphabetically by last name. This differs from conventional numbering where the numbers correspond with what is on the player's jerseys.
+_注意_：球隊號碼是按照姓氏字母順序排列的。 這與傳統的編號方式不同，傳統的編號方式是數字與球員球衣上的號碼相對應。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#team` element.
+你應該使用 `document.getElementById()` 方法來獲取 `#team` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `teamName` and assign it the `#team` element.
+你應該使用 `const` 聲明名爲 `teamName` 的變量，併爲其分配 `#team` 元素。
 
 ```js
 assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
index ed899230647..a4b4c6f86d6 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
@@ -7,29 +7,29 @@ dashedName: step-2
 
 # --description--
 
-Next, access the `id` called `"sport"` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `"year"` to a `const` variable called `worldCupYear`.
+接下來，從 HTML 文檔中訪問名爲 `"sport"` 的 `id`，並將其存儲在名爲 `typeOfSport` 的 `const` 變量中。 在該變量下方，將 `"year"` 的 `id` 分配給名爲 `worldCupYear` 的 `const` 變量。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#sport` element.
+你應該使用 `document.getElementById()` 方法來獲取 `#sport` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element.
+你應該使用 `const` 聲明名爲 `typeOfSport` 的變量併爲其分配 `#sport` 元素。
 
 ```js
 assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
 ```
 
-You should use the `document.getElementById()` method to get the `#year` element.
+你應該使用 `document.getElementById()` 方法來獲取 `#year` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element.
+你應該使用 `const` 聲明名爲 `worldCupYear` 的變量，併爲其分配 `#year` 元素。
 
 ```js
 assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
index ec841ae34ef..49d8e274cfc 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
@@ -7,17 +7,17 @@ dashedName: step-4
 
 # --description--
 
-Create one more `const` variable called `playersDropdownList` and assign it the `id` of `"players"` using the `getElementById` method.
+再創建一個名爲 `playersDropdownList` 的 `const` 變量，並使用 `getElementById` 方法爲其分配 `"players"` 的 `id`。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#players` element.
+你應該使用 `document.getElementById()` 方法來獲取 `#players` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element.
+你應該使用 `const` 聲明名爲 `playersDropdownList` 的變量，併爲其分配 `#players` 元素。
 
 ```js
 assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
index 18aedcdfe54..1e0b6ff85d0 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
@@ -7,13 +7,13 @@ dashedName: step-5
 
 # --description--
 
-Now it is time to build out the data structure that will hold all of the information for your football team.
+現在是時候構建保存足球隊所有信息的數據結構了。
 
-Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object.
+在剛剛創建的變量下方，創建一個名爲 `myFavoriteFootballTeam` 的新 `const` 變量，併爲其分配一個空對象。
 
 # --hints--
 
-You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object.
+你應該使用 `const` 來聲明名爲 `myFavoriteFootballTeam` 的變量併爲其分配一個空對象。
 
 ```js
 assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
index a01a183a7c0..be55e142276 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
@@ -7,23 +7,23 @@ dashedName: step-8
 
 # --description--
 
-Below the `sport` property, add a new property with a key named `year` and a number value of `1986`.
+在 `sport` 屬性下方，添加一個新屬性，其鍵名爲 `year`，數字值爲 `1986`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `year` property.
+你的 `myFavoriteFootballTeam` 對象應該具有 `year` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'year');
 ```
 
-Your `year` property should be a number.
+你的 `year` 屬性應該是一個數字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.year);
 ```
 
-Your `year` property should be set to `1986`.
+你的 `year` 屬性應設置爲 `1986`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.year, 1986);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
index b086baf6529..f264d665360 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
@@ -7,23 +7,23 @@ dashedName: step-9
 
 # --description--
 
-Below the `year` property, add a new property with a key named `isWorldCupWinner` and a boolean value set to `true`.
+在 `year` 屬性下方，添加一個新屬性，其鍵名爲 `isWorldCupWinner`，布爾值設置爲 `true`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
+你的 `myFavoriteFootballTeam` 對象應該具有 `isWorldCupWinner` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
 ```
 
-Your `isWorldCupWinner` property should be a boolean.
+你的 `isWorldCupWinner` 屬性應該是布爾值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
 ```
 
-Your `isWorldCupWinner` property should be set to `true`.
+你的 `isWorldCupWinner` 屬性應設置爲 `true`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
index f4a232085ba..9b80dcac086 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
@@ -7,47 +7,47 @@ dashedName: step-10
 
 # --description--
 
-Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `"Carlos Bilardo"`. Below that property, add another key called `matches` with a number value of `7`.
+在 `isWorldCupWinner` 屬性下方，添加一個名爲 `headCoach` 的新鍵，其值爲空對象。 在該對象內部，添加一個屬性，其鍵爲 `coachName`，字符串值爲 `"Carlos Bilardo"`。 在該屬性下方，添加另一個名爲 `matches` 的鍵，其數字值爲 `7`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `headCoach` property.
+你的 `myFavoriteFootballTeam` 對象應該具有 `headCoach` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'headCoach');
 ```
 
-Your `headCoach` value should be an object.
+你的 `headCoach` 值應該是一個對象。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.headCoach)
 ```
 
-Your `headCoach` object should have a `coachName` property.
+你的 `headCoach` 對象應該具有 `coachName` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.headCoach, 'coachName');
 ```
 
-Your `coachName` property should be set to `"Carlos Bilardo"`.
+你的 `coachName` 屬性應設置爲 `"Carlos Bilardo"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo');
 ```
 
-Your `headCoach` object should have a `matches` property.
+你的 `headCoach` 對象應該具有 `matches` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.headCoach, 'matches');
 ```
 
-Your `matches` property should be a number.
+你的 `matches` 屬性應該是一個數字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.headCoach.matches);
 ```
 
-Your `matches` property should be set to `7`.
+你的 `matches` 屬性應設置爲 `7`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.headCoach.matches, 7);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
index 54def9a0e3e..f4ddda17a18 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
@@ -7,23 +7,23 @@ dashedName: step-11
 
 # --description--
 
-Below the `headCoach` property, create a new property with a key named `players` with the value of an empty array.
+在 `headCoach` 屬性下方，創建一個鍵爲 `players` 的新屬性，其值爲一個空數組。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `players` property.
+你的 `myFavoriteFootballTeam` 對象應該具有 `players` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'players');
 ```
 
-Your `players` value should be an array.
+你的 `players` 值應該是一個數組。
 
 ```js
 assert.isArray(myFavoriteFootballTeam.players)
 ```
 
-Your `players` array should be empty.
+你的 `players` 數組應該是空的。
 
 ```js
 assert.deepEqual(myFavoriteFootballTeam.players, [])
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
index 635cce96193..c15b1ebcb83 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
@@ -7,7 +7,7 @@ dashedName: step-12
 
 # --description--
 
-Inside that `players` array, create a new object with the following properties:
+在 `players` 數組內，創建一個具有以下屬性的新對象：
 
 ```md
 name: "Sergio Almirón"
@@ -17,83 +17,83 @@ isCaptain: false
 nickname: null
 ```
 
-_NOTE_: The numbers for the team are organized alphabetically by last name. This differs from conventional numbering where the numbers correspond with what is on the player's jerseys.
+_注意_：球隊號碼是按照姓氏字母順序排列的。 這與傳統的編號方式不同，傳統的編號方式是數字與球員球衣上的號碼相對應。
 
 # --hints--
 
-Your `myFavoriteFootballTeam.players` array should have the value of an object.
+你的 `myFavoriteFootballTeam.players` 數組應該具有一個對象的值。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.players[0])
 ```
 
-Your new object should have a `name` property.
+你的新對象應該有一個 `name` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'name');
 ```
 
-Your `name` property should be set to `"Sergio Almirón"`.
+你的 `name` 屬性應設置爲 `"Sergio Almirón"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón');
 ```
 
-Your new object should have a `position` property.
+你的新對象應該具有 `position` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'position');
 ```
 
-Your `position` property should be set to `"forward"`.
+你的 `position` 屬性應設置爲 `"forward"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward');
 ```
 
-Your new object should have a `number` property.
+你的新對象應該具有 `number` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'number');
 ```
 
-Your `number` property should be a number.
+你的 `number` 屬性應該是一個數字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.players[0]?.number);
 ```
 
-Your `number` property should be set to `1`.
+你的 `number` 屬性應設置爲 `1`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.number, 1);
 ```
 
-Your new object should have a `isCaptain` property.
+你的新對象應該具有 `isCaptain` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'isCaptain');
 ```
 
-Your `isCaptain` property should be a boolean.
+你的 `isCaptain` 屬性應該是布爾值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain);
 ```
 
-Your `isCaptain` property should be set to `false`.
+你的 `isCaptain` 屬性應設置爲 `false`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false);
 ```
 
-Your new object should have a `nickname` property.
+你的新對象應該有一個 `nickname` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'nickname');
 ```
 
-Your `nickname` property should be set to `null`.
+你的 `nickname` 屬性應設置爲 `null`。
 
 ```js
 assert.isNull(myFavoriteFootballTeam.players[0]?.nickname);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
index a9b6d910242..0a016fd4725 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-Below that object, create a new object with the following properties:
+在該對象下方，創建一個具有以下屬性的新對象：
 
 ```md          
 name: "Sergio Batista"
@@ -19,86 +19,86 @@ nickname: null
 
 # --hints--
 
-Your `myFavoriteFootballTeam.players` array should have two values.
+你的 `myFavoriteFootballTeam.players` 數組應該有兩個值。
 
 ```js
 // Have to assert at least, because we pre-populate data in the next step.
 assert.isAtLeast(myFavoriteFootballTeam.players.length, 2);
 ```
 
-Your `myFavoriteFootballTeam.players` array should have an object as the second value.
+你的 `myFavoriteFootballTeam.players` 數組應該有一個對象作爲第二個值。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.players[1])
 ```
 
-Your new object should have a `name` property.
+你的新對象應該有一個 `name` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'name');
 ```
 
-Your `name` property should be set to `"Sergio Batista"`.
+你的 `name` 屬性應設置爲 `"Sergio Batista"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista');
 ```
 
-Your new object should have a `position` property.
+你的新對象應該具有 `position` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'position');
 ```
 
-Your `position` property should be set to `"midfielder"`.
+你的 `position` 屬性應設置爲 `"midfielder"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder');
 ```
 
-Your new object should have a `number` property.
+你的新對象應該具有 `number` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'number');
 ```
 
-Your `number` property should be a number.
+你的 `number` 屬性應該是一個數字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.players[1]?.number);
 ```
 
-Your `number` property should be set to `2`.
+你的 `number` 屬性應設置爲 `2`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.number, 2);
 ```
 
-Your new object should have a `isCaptain` property.
+你的新對象應該具有 `isCaptain` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'isCaptain');
 ```
 
-Your `isCaptain` property should be a boolean.
+你的 `isCaptain` 屬性應該是布爾值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain);
 ```
 
-Your `isCaptain` property should be set to `false`.
+你的 `isCaptain` 屬性應設置爲 `false`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false);
 ```
 
-Your new object should have a `nickname` property.
+你的新對象應該有一個 `nickname` 屬性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'nickname');
 ```
 
-Your `nickname` property should be set to `null`.
+你的 `nickname` 屬性應設置爲 `null`。
 
 ```js
 assert.isNull(myFavoriteFootballTeam.players[1]?.nickname);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
index d9520c64e56..37f23fcdcc3 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
@@ -1,23 +1,23 @@
 ---
 id: 63e0334b7a24bd3c96aca4de
-title: Step 16
+title: 步驟 16
 challengeType: 0
 dashedName: step-16
 ---
 
 # --description--
 
-Below the `sport` variable, access the key called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`.
+在 `sport` 變量下方，從 `myFavoriteFootballTeam` 對象訪問名爲 `team` 的鍵，並將其分配給名爲 `team` 的新 `const` 變量。
 
 # --hints--
 
-You should use `const` to declare a `team` variable.
+你應該使用 `const` 來聲明 `team` 變量。
 
 ```js
 assert.match(code, /const\s+team\s*=/);
 ```
 
-You should assign the value of the `team` key from the `myFavoriteFootballTeam` object to the `team` variable.
+你應該將 `myFavoriteFootballTeam` 對象中的 `team` 鍵的值分配給 `team` 變量。
 
 ```js
 assert.equal(team, myFavoriteFootballTeam.team);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
index 289713fd548..91021802a01 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
@@ -1,15 +1,15 @@
 ---
 id: 63e036373fc9173d284e165a
-title: Step 17
+title: 步驟 17
 challengeType: 0
 dashedName: step-17
 ---
 
 # --description--
 
-In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal.
+在前兩個步驟中，你一直使用點符號訪問 `myFavoriteFootballTeam` 對象的屬性，並將它們分配給新的 `const` 變量。 但在 JavaScript 中，有一種更簡單的方法來實現相同的目標。
 
-The <dfn>object destructuring</dfn> syntax allows you to unpack values from arrays and objects:
+<dfn>對象解構</dfn>語法允許你從數組和對象中解包值：
 
 ```js
 const developerObj = {
@@ -21,11 +21,11 @@ const developerObj = {
 const { name, isDeveloper } = developerObj;
 ```
 
-Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code.
+使用新的解構語法重寫下面兩行代碼。 你的答案應該是一行代碼。
 
 # --hints--
 
-Use object destructuring to access the `sport` and `team` values.
+使用對象解構來訪問 `sport` 和 `team` 值。
 
 ```js
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
index 2a8ea3b0d0b..f34d7bca678 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
@@ -1,17 +1,17 @@
 ---
 id: 63e03b86008bbb3e1c3de846
-title: Step 18
+title: 步驟 18
 challengeType: 0
 dashedName: step-18
 ---
 
 # --description--
 
-Next, add the `year` and `players` to your destructuring assignment.
+接下來，將 `year` 和 `players` 添加到你的解構賦值中。
 
 # --hints--
 
-You should add the `year` and `players` values to your destructuring assignment.
+你應該將 `year` 和 `players` 值添加到你的解構賦值中。
 
 ```js
 assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
index ed536a4b70e..a5830d88924 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
@@ -1,21 +1,21 @@
 ---
 id: 63e050bf935ac341b88326d6
-title: Step 20
+title: 步驟 20
 challengeType: 0
 dashedName: step-20
 ---
 
 # --description--
 
-Now you need to start displaying the team's information on the screen.
+現在你需要開始在屏幕上顯示球隊的信息。
 
-Below your destructuring assignments, assign the `sport` variable to `typeOfSport.textContent`.
+在解構分配下方，將 `sport` 變量分配給 `typeOfSport.textContent`。
 
-Once you complete that task, you should see the result in the preview window.
+完成該任務後，你應該在預覽窗口中看到結果。
 
 # --hints--
 
-You should assign the `sport` variable to `typeOfSport.textContent`.
+你應該將 `sport` 變量分配給 `typeOfSport.textContent`。
 
 ```js
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
index 0232d627933..c7ce19db8aa 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
@@ -18,17 +18,17 @@ console.log(greeting("John")); // Hello John
 console.log(greeting()); // Hello Anonymous
 ```
 
-Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. Remember that you destructured the `players` variable from the `myFavoriteFootballTeam` object on line `175`.
+向你的 `setPlayerCards` 函數添加一個名爲 `arr` 的新參數，併爲其分配一個默認值 `players`。 請記住，你在 `175` 行從 `myFavoriteFootballTeam` 對象中解構了 `players` 變量。
 
 # --hints--
 
-Your `setPlayerCards` function should take an `arr` parameter.
+你的 `setPlayerCards` 函數應該採用 `arr` 參數。
 
 ```js
 assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/);
 ```
 
-Your `arr` parameter should have a default value of `players`.
+你的 `arr` 參數應該有一個默認值 `players`。
 
 ```js
 assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
index 90cde5e529e..f79e3d3d40e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
@@ -1,39 +1,39 @@
 ---
 id: 63e949b8327aa2aca2ca8eac
-title: Step 25
+title: 步驟 25
 challengeType: 0
 dashedName: step-25
 ---
 
 # --description--
 
-The next step is to create a new array that will be responsible for adding the player card information to the page.
+下一步是創建一個新的數組，負責將球員卡信息添加到頁面。
 
-Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`.
+在 `setPlayerCards` 函數中，首先將 `map` 方法添加到 `arr`，該方法將接受一個空的回調函數。 然後，使用加法賦值 `+=` 運算符將新數組分配給 `playerCards.innerHTML`。
 
-Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element.
+請記住，`innerHTML` 屬性獲取（或在本例中設置）`playerCards` 元素的 HTML 標記。
 
 # --hints--
 
-You should call the `.map()` method on your `arr` parameter.
+你應該在 `arr` 參數上調用 `.map()` 方法。
 
 ```js
 assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/);
 ```
 
-Your `.map()` method should take an empty callback function.
+你的 `.map()` 方法應該採用一個空的回調函數。
 
 ```js
 assert.match(code, /arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
 ```
 
-You should use the `+=` operator on `playerCards.innerHTML`.
+你應該在 `playerCards.innerHTML` 上使用 `+=` 運算符。
 
 ```js
 assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/);
 ```
 
-You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator.
+你應該使用 `+=` 運算符將 `arr.map()` 分配給 `playerCards.innerHTML`。
 
 ```js
 assert.match(code, /playerCards\.innerHTML\s*\+=\s*arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
index 3912e0e6228..e9e2b3f911c 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
@@ -1,13 +1,13 @@
 ---
 id: 63e95a45dce95baf41dd4f78
-title: Step 28
+title: 步驟 28
 challengeType: 0
 dashedName: step-28
 ---
 
 # --description--
 
-Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter:
+在 `div` 內，添加一個包含 `name` 參數的 `h2` 元素。 由於你正在使用模板字面量，因此需要對 `name` 參數使用嵌入表達式：
 
 ```js
 ${expression goes here}
@@ -15,13 +15,13 @@ ${expression goes here}
 
 # --hints--
 
-You should add an `h2` element with the `name` parameter.
+你應該添加一個帶有 `name` 參數的 `h2` 元素。
 
 ```js
 assert.match(code, /\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*/)
 ```
 
-Your `h2` should be nested in your `div`.
+你的 `h2` 應該嵌套在你的 `div` 中。
 
 ```js
 assert.match(code, /`\s*<div\s+class\s*=\s*"\s*player-card\s*"\s*>\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
index 0a1a3b442c5..8ea3d9637d8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
@@ -1,23 +1,23 @@
 ---
 id: 63e96938d2a347b2734a1587
-title: Step 31
+title: 步驟 31
 challengeType: 0
 dashedName: step-31
 ---
 
 # --description--
 
-Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter.
+在段落元素下方，添加另一個段落元素，其中包含文本 `Number:` 和包含 `number` 參數的嵌入表達式。
 
 # --hints--
 
-You should add a new paragraph element with the text `Number:` followed by the `number` variable.
+你應該添加一個新的段落元素，其中包含文本 `Number:`，後跟 `number` 變量。
 
 ```js
 assert.match(code, /\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
 ```
 
-Your new `p` element should come after your existing `p` element.
+你的新 `p` 元素應位於現有的 `p` 元素之後。
 
 ```js
 assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
index ecdc7fcd3bc..50e859eb0d4 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
@@ -1,23 +1,23 @@
 ---
 id: 63e96eb94c97b6b31ee50f63
-title: Step 32
+title: 步驟 32
 challengeType: 0
 dashedName: step-32
 ---
 
 # --description--
 
-Below your existing paragraph elements, add another paragraph element with the text `Nickname:`.
+在現有的段落元素下方，添加另一個帶有文本 `Nickname:` 的段落元素。
 
 # --hints--
 
-You should add a new paragraph element with the text `Nickname:`.
+你應該添加一個帶有文本 `Nickname:` 的新段落元素。
 
 ```js
 assert.match(code, /\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
 ```
 
-Your new `p` element should come after the `h2` element.
+你的新 `p` 元素應位於 `h2` 元素之後。
 
 ```js
 assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
index cf2a41f139f..427d4200dbb 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
@@ -1,26 +1,26 @@
 ---
 id: 63e9737f686c76b4078a60f4
-title: Step 34
+title: 步驟 34
 challengeType: 0
 dashedName: step-34
 ---
 
 # --description--
 
-The `.map()` method will return a new array of `player-card` items separated by commas.
+`.map()` 方法將返回一個由逗號分隔的 `player-card` 項組成的新數組。
 
-To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method.
+要刪除每個 `player-card` 之間的逗號以使其不顯示在屏幕上，請將 `.join()` 方法鏈接到 `.map()` 方法。 傳遞一個空字符串作爲 `.join()` 方法的參數。
 
 
 # --hints--
 
-You should chain the `.join()` method to the `.map()` method.
+你應該將 `.join()` 方法鏈接到 `.map()` 方法。
 
 ```js
 assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s);
 ```
 
-You should pass an empty string to the `.join()` method.
+你應該將一個空字符串傳遞給 `.join()` 方法。
 
 ```js
 assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
index 488cdddbe15..c32160df003 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
@@ -1,31 +1,31 @@
 ---
 id: 63f28972973504e7bb58b0b3
-title: Step 35
+title: 步驟 35
 challengeType: 0
 dashedName: step-35
 ---
 
 # --description--
 
-The next step is to create a function that will detect when a user makes a selection from the `playersDropdownList`.
+下一步是創建一個函數，用於檢測用戶何時從 `playersDropdownList` 中做出選擇。
 
-Use the `.addEventListener()` method on `playersDropdownList`. Inside the event listener, pass in a `"change"` event type and an empty callback function.
+在 `playersDropdownList` 上使用 `.addEventListener()` 方法。 在事件監聽器內部，傳入一個 `"change"` 事件類型和一個空的回調函數。
 
 # --hints--
 
-You should call the `.addEventListener()` method on the `playersDropdownList` variable.
+你應該在 `playersDropdownList` 變量上調用 `.addEventListener()` 方法。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(/);
 ```
 
-Your event listener should listen for the `"change"` event.
+你的事件監聽器應該監聽 `"change"` 事件。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/);
 ```
 
-Your event listener should have an empty callback function.
+你的事件監聽器應該有一個空的回調函數。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
index ec7cc6c5b4f..1a5ededb2df 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
@@ -1,19 +1,19 @@
 ---
 id: 63f28ef082d771e8bf71f94a
-title: Step 36
+title: 步驟 36
 challengeType: 0
 dashedName: step-36
 ---
 
 # --description--
 
-For the callback function, pass in `e` as a parameter.
+對於回調函數，傳入 `e` 作爲參數。
 
-`e` represents an object which contains the information for that event.
+`e` 表示包含該事件信息的對象。
 
 # --hints--
 
-You should pass in `e` as a parameter to your callback function.
+你應該將 `e` 作爲參數傳遞給回調函數。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*(\(\s*e\s*\)|e)\s*=>\s*\{\s*\}\s*\)/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
index e0dee430ad2..edc888ca4ee 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
@@ -1,33 +1,33 @@
 ---
 id: 63f29804e3ec00ea6fab1ec4
-title: Step 38
+title: 步驟 38
 challengeType: 0
 dashedName: step-38
 ---
 
 # --description--
 
-Remove the `console.log` statement you created in the previous step.
+刪除你在上一步中創建的 `console.log` 語句。
 
-The next step would be to reset the content for the `playerCards` element.
+下一步是重置 `playerCards` 元素的內容。
 
-Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string.
+在回調函數內部，訪問 `playerCards` 元素的 `innerHTML` 屬性併爲其分配一個空字符串值。
 
 # --hints--
 
-You should not have the `console.log` statement in your code.
+你的代碼中不應該有 `console.log` 語句。
 
 ```js
 assert.notMatch(code, /\s*console\.log\(\s*e\.target\.value\s*\)/);
 ```
 
-You should access the `innerHTML` property of the `playerCards` element.
+你應該訪問 `playerCards` 元素的 `innerHTML` 屬性。
 
 ```js
 assert.match(code, /playerCards\.innerHTML\s*=/);
 ```
 
-You should set the `innerHTML` property to an empty string.
+你應該將 `innerHTML` 屬性設置爲空字符串。
 
 ```js
 assert.match(code, /\s*playerCards\.innerHTML\s*=\s*('|"|`)\1/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
index b30ebb4893a..9e17ef847e8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
@@ -1,31 +1,31 @@
 ---
 id: 63f29ce62aea65eb041758c8
-title: Step 39
+title: 步驟 39
 challengeType: 0
 dashedName: step-39
 ---
 
 # --description--
 
-The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions.
+下一步將添加一個 `switch` 語句，該語句將檢查用戶從玩家下拉菜單中的選擇，並根據玩家的位置過濾掉卡片。
 
-Add a `switch` statement and use `e.target.value` for the expression.
+添加 `switch` 語句並使用 `e.target.value` 作爲表達式。
 
 # --hints--
 
-You should use a `switch` statement.
+你應該使用 `switch` 語句。
 
 ```js
 assert.match(code, /switch/);
 ```
 
-Your `switch` statement should use `e.target.value` for the expression.
+你的 `switch` 語句應該使用 `e.target.value` 作爲表達式。
 
 ```js
 assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/);
 ```
 
-Your `switch` statement should be empty.
+你的 `switch` 語句應該是空的。
 
 ```js
 assert.match(code, /\s*switch\s*\(\s*e\.target\.value\s*\)\s*{\s*}/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
index 537d02a7c7d..eba58ad0197 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
@@ -1,19 +1,19 @@
 ---
 id: 63f2a0a860790eebe61bf908
-title: Step 40
+title: 步驟 40
 challengeType: 0
 dashedName: step-40
 ---
 
 # --description--
 
-If the user selects `Nicknames` from the dropdown menu you will want to filter out player cards that have a nickname.
+如果用戶從下拉菜單中選擇 `Nicknames`，你將需要過濾掉帶有暱稱的球員卡。
 
-Start by adding a `case` clause for `"nickname"` inside your `switch` statement.
+首先在 `switch` 語句中爲 `"nickname"` 添加一個 `case` 子句。
 
 # --hints--
 
-You should add a new `case` clause for `"nickname"` inside your `switch` statement.
+你應該在 `switch` 語句中爲 `"nickname"` 添加一個新的 `case` 子句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
index 25b1c3f15a5..f1e6cdd105e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2a5f09a785aed155c0a56
-title: Step 44
+title: 步驟 44
 challengeType: 0
 dashedName: step-44
 ---
 
 # --description--
 
-Add a new `case` for `"midfielder"` that checks if `player.position` equals `"midfielder"` following the same pattern from the previous step.
+爲 `"midfielder"` 添加一個新的 `case`，按照與上一步相同的模式檢查 `player.position` 是否等於 `"midfielder"`。
 
 # --hints--
 
-You should add a new `case` for `"midfielder"` inside your `switch` statement.
+你應該在 `switch` 語句中爲 `"midfielder"` 添加一個新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/)
 ```
 
-In your `"midfielder"` `case`, you should call the `setPlayerCards` function.
+在你的 `"midfielder"` `case` 中，你應該調用 `setPlayerCards` 函數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你應該將 `players.filter()` 傳遞給你的 `setPlayerCards` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你應該將箭頭回調函數傳遞給你的 `players.filter()` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回調應該採用 `player` 參數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"midfielder"`.
+你的 `filter()` 回調應該隱式返回檢查 `player.position` 是否爲 `"midfielder"` 的結果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)midfielder\2|('|"|`)midfielder\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 調用下方添加 `break` 語句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)midfielder\2|('|"|`)midfielder\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
index 0a949a6ce47..d8e760898ab 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2a8e14fb388edd3242527
-title: Step 45
+title: 步驟 45
 challengeType: 0
 dashedName: step-45
 ---
 
 # --description--
 
-Add a new `case` for `"defender"` that checks if `player.position` equals `"defender"` following the same pattern as the previous step.
+爲 `"defender"` 添加一個新的 `case`，按照與上一步相同的模式檢查 `player.position` 是否等於 `"defender"`。
 
 # --hints--
 
-You should add a new `case` for `"defender"` inside your `switch` statement.
+你應該在 `switch` 語句內爲 `"defender"` 添加一個新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/)
 ```
 
-In your `"defender"` `case`, you should call the `setPlayerCards` function.
+在你的 `"defender"` `case` 中，你應該調用 `setPlayerCards` 函數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你應該將 `players.filter()` 傳遞給你的 `setPlayerCards` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你應該將箭頭回調函數傳遞給你的 `players.filter()` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回調應該採用 `player` 參數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"defender"`.
+你的 `filter()` 回調應該隱式返回檢查 `player.position` 是否爲 `"defender"` 的結果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)defender\2|('|"|`)defender\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 調用下方添加 `break` 語句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)defender\2|('|"|`)defender\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
index e8bb1e54c5d..e271d658998 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2aa36fcdc63ee4e18fc37
-title: Step 46
+title: 步驟 46
 challengeType: 0
 dashedName: step-46
 ---
 
 # --description--
 
-Add a new `case` for `"goalkeeper"` that checks if `player.position` equals `"goalkeeper"` following the same pattern as the previous step.
+爲 `"goalkeeper"` 添加一個新的 `case`，按照與上一步相同的模式檢查 `player.position` 是否等於 `"goalkeeper"`。
 
 # --hints--
 
-You should add a new `case` for `"goalkeeper"` inside your `switch` statement.
+你應該在 `switch` 語句內爲 `"goalkeeper"` 添加一個新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/)
 ```
 
-In your `"goalkeeper"` `case`, you should call the `setPlayerCards` function.
+在你的 `"goalkeeper"` `case` 中，你應該調用 `setPlayerCards` 函數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你應該將 `players.filter()` 傳遞給你的 `setPlayerCards` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你應該將箭頭回調函數傳遞給你的 `players.filter()` 調用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回調應該採用 `player` 參數。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"goalkeeper"`.
+你的 `filter()` 回調應隱式返回檢查 `player.position` 是否爲 `"goalkeeper"` 的結果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)goalkeeper\2|('|"|`)goalkeeper\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 調用下方添加 `break` 語句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)goalkeeper\2|('|"|`)goalkeeper\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
index 90517bafb28..16ff72db4e8 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
@@ -1,19 +1,19 @@
 ---
 id: 641fcfd468185384ac218b7d
-title: Step 42
+title: 步驟 42
 challengeType: 0
 dashedName: step-42
 ---
 
 # --description--
 
-Before you can move onto the next `case`, you will need to add a `break` statement.
+在轉到下一個 `case` 之前，你需要添加 `break` 語句。
 
-Below your `setPlayerCards` call, add a `break` statement.
+在 `setPlayerCards` 調用下方，添加 `break` 語句。
 
 # --hints--
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 調用下方添加 `break` 語句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>\s*(player\.nickname\s*!==?\s*null|null\s*!==?\s*player\.nickname)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
index 2ebf936fd91..87967efa197 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
@@ -15,7 +15,7 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
 
 # --instructions--
 
-Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。 请修改锚点标签（`a`），将其包含的文本从 `Click here` 改为 `information about batteries`。
+Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。 Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
index 9b0719ac7bc..f5a3b18fa0c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
@@ -1,6 +1,6 @@
 ---
 id: 587d781d367417b2b2512ac8
-title: 调整锚点的悬停状态
+title: 调整锚标签的悬停状态
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cakRGcm'
 forumTopicId: 301035
@@ -11,7 +11,7 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag
 
 本挑战将要涉及到伪类。 伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
 
-比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。 下面的代码可以在鼠标悬停在超链接上时将其 `color` 变成红色：
+比如，可以使用 `:hover` 伪类选择器来选取锚标签的悬停状态。 下面的代码可以在鼠标悬停在锚标签上时将其 `color` 变成红色：
 
 ```css
 a:hover {
@@ -25,13 +25,13 @@ a:hover {
 
 # --hints--
 
-超链接的 `color` 应该保持黑色，应只添加 `:hover` CSS 规则。
+The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
 
 ```js
 assert($('a').css('color') == 'rgb(0, 0, 0)');
 ```
 
-悬停超链接时超链接的 `color` 应该变成蓝色。
+悬停锚标签时它的 `color` 应该变成蓝色。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
index 1d1af5dc559..5bfa9951c3e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
@@ -17,7 +17,7 @@ CSS 里的 `opacity` 属性用来设置元素的透明度。
 
 # --instructions--
 
-将 class 为 `links` 的所有超链接的 `opacity` 属性值设置 0.7。
+将 class 为 `links` 的所有锚标签的 `opacity` 属性值设置 0.7。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
index 04019500a2b..2c077ca0227 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -22,13 +22,13 @@ dashedName: nest-an-anchor-element-within-a-paragraph
 <p> Here's a ... for you to follow. </p>
 ```
 
-接下来是*锚点*元素 `<a>`（它需要结束标签 `</a>`）：
+接下来是*锚*元素 `<a>`（它需要结束标签 `</a>`）：
 
 ```html
 <a> ... </a>
 ```
 
-`target` 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
+`target` 是锚元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚元素的另一个属性，它用来指定链接的 URL：
 
 ```html
 <a href="https://www.freecodecamp.org" target="_blank"> ... </a>
@@ -46,7 +46,7 @@ Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.free
 
 # --instructions--
 
-创建一个新的段落 `p` 元素来包裹 `a` 元素。 不要创建一个新的锚点标签。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
+创建一个新的段落 `p` 元素来包裹 `a` 元素。 不要创建一个新的锚标签。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 27117f4c24f..fb32fc0f1db 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index c1f60f6532e..0cf2307d597 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 1dc6c81cf67..09c28c0ae02 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
index 5a01beb38d8..8d1b064b0ff 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
@@ -13,7 +13,7 @@ dashedName: step-12
 - `HTML`
 - `CSS`
 
-列表项文本应包含在锚标记中。
+列表项文本应包含在锚标签中。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 1d07da17833..2f218c99a66 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 在第二个 `section` 元素中，添加两个具有 `question-block` 类的 `div` 元素。
 
-然后，在每个 `div.question-block` 元素中，添加一个带有递增数字文本、从 `1` 开始的 `p` 元素，以及一个具有 `question` 类的 `fieldset` 元素。
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.cla
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-你应该在每个 `div.question-block` 元素中嵌套一个 `p` 元素。
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-你应该给第一个 `p` 元素添加文本 `1`。
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-你应该给第二个 `p` 元素添加文本 `2`。
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 你应该在每个 `div.question-block` 元素中嵌套一个 `fieldset` 元素。
@@ -55,16 +55,16 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-你应该将第一个 `fieldset` 元素放在第一个 `p` 元素之后。
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-你应该将第二个 `fieldset` 元素放在第二个 `p` 元素之后。
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 你应该给第一个 `fieldset` 元素添加一个 `question` 类。
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index c28c036d181..7a56b4c7b20 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 3c70097abf8..491246875d1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 718d0716309..59ad291081b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 217174976a1..abf8cbac6f3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index b1d3f26e543..9e9eb5afcfb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 553536256eb..1228016acf8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index ad0b835c3e2..df1dc759709 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index 81d6cc9221d..0bca2bb4d56 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 341b7385351..44eb5e6378c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index a93405376a9..0bb59ba37a7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 318ef3e6a57..c8c85f353b3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 357a1212598..7bb7447c059 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index 9e144d99978..218cfd2d7c0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 4c2294707db..e334b96e539 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 03ae10253bf..50dda41f81a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index 7e9848ab452..1411210e5a4 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index ca9e3b21638..354e92012f0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index ef41cd394f7..82f48049ceb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index 811071ea755..aa6dbc3b0cc 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index 44fb9204f89..3bc8ccbb949 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 69d206bb182..0b672613880 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 9290510e842..1589df13320 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index 907448e8e7c..5d12c681c9a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 871e54e3110..302ac628da4 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index c883cb3ac58..0340366f2cd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 293a1e4c80b..8d7dc259290 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index b96b274b0dc..b4c4a894b79 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 2acbcef5fb3..19c648c6fbe 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 31507dbf972..91c55bf63fb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index c0c3fb306e3..d75b29d7d13 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index 7180af84a81..bc55cb879e8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 3dc63824415..0da70011682 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index cbeb1b06a75..7bcdd70ab6b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 4271b23d1e0..c884506d568 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 8dd566dc1c0..9e46e021cf5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index 32e78f32137..bc91081fa74 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 5f57bdc4d1d..af71101e29b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 3153c84675d..25d379d56ea 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index df04521aa87..0fe5f6bd73c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index e28f8ee453d..8448de6e85f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index fbc078a4399..15143e1f1e4 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index a7f0280dd37..bc6300e9a97 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 91a288c1dbb..a9b6223012b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 `title` 是网页上几个不可见附加信息之一，但它对搜索引擎和网页如何显示很有用。
 
-在`head`元素中，嵌套一个 `meta` 元素，其属性名为 `charset`，值为`utf-8`，以告诉浏览器如何对页面进行编码。 请注意，`meta` 元素是自闭合的。
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 你应该有一个 `meta` 标签。
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 你的 `meta` 标签应该有一个 `charset` 属性。
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 你的 `charset` 属性的值应该为 `utf-8`。
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 5478917805d..b650884db3c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Now you need to link the `styles.css` file, so the styles will be applied again.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 你不应该改变你现有的 `head` 元素。 请确保你没有删除结束标记。
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-你应该有一个自闭合的 `link` 元素。
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 你的 `link` 元素应该在你的 `head` 元素中。
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 你的 `link` 元素应该有一个 `rel` 属性，其值为 `stylesheet`。
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 你的 `link` 元素应该有一个 `href` 属性，其值为 `styles.css`。
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index ca5071f5fc8..712f1ae9785 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 你可以使用 `hr` 元素在不同内容的部分之间显示一个分隔符。
 
-首先，在具有 `established` 类的 `p` 元素和第一个 `section` 之间添加一个 `hr` 元素。 注意：`hr` 元素是没有结束标签的。
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-你应该添加一个 `hr` 元素。 请注意，`hr` 元素是自闭合的。
+你应该添加一个 `hr` 元素。
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-你不应更改你现有的具有类 `established` 的 `p` 元素。
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-你不应该改变你现有的 `main` 元素。
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-你的 `hr` 元素应该在你的 `p` 元素和 `section` 元素之间。
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 6e3956407ca..65ea0aabe69 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ dashedName: step-88
 
 # --hints--
 
-你应该有一个 `<img>` 标签。 请记住，`img` 元素是自闭合的。
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-你的 `img` 元素应具有值为 `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg` 的 `src` 属性。
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-你的 `img` 元素应该具有值为 `coffee icon` 的 `alt` 属性。
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index 66389630d3e..d8060065267 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-渐变过渡通常会逐渐从一种颜色变为另一种颜色。 你可以将更改设为实线，如下所示：
+渐变过渡通常会逐渐从一种颜色变为另一种颜色。 When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 955072c6c6c..2fa4cc41b13 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-你可以通过使用 `img` 元素来为你的网站添加图片。 `img` 元素只有一个开始标签，没有结束标签。 A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+你可以通过使用 `img` 元素来为你的网站添加图片。 `img` 元素只有一个开始标签，没有结束标签。 An element without a closing tag is known as a <dfn>void element</dfn>.
 
 在 `p` 元素的下方添加一个 `img` 元素。 此时，没有图片会出现在浏览器中。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 5047487dbf1..01bee21c3a0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -19,13 +19,13 @@ dashedName: step-10
 
 # --hints--
 
-你的锚点元素（`a`）应该有一个开始标签。 开始标签的书写语法为：`<elementName>`。
+你的锚元素（`a`）应该有一个开始标签。 开始标签的书写语法为：`<elementName>`。
 
 ```js
 assert(document.querySelector('a'));
 ```
 
-你的锚点元素（`a`）应该有一个结束标签。 结束标签在 `<` 字符后面要有一个 `/`。
+你的锚元素（`a`）应该有一个结束标签。 结束标签在 `<` 字符后面要有一个 `/`。
 
 ```js
 assert(code.match(/<\/a\>/));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index e8a588cff9b..f32fece8b5b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -7,7 +7,7 @@ dashedName: step-11
 
 # --description--
 
-链接的文本必须放置在锚点元素（`a`）的开始和结束标签之间。
+链接的文本必须放置在锚元素（`a`）的开始和结束标签之间。
 
 这是一个链接文本是 `click here to go to freeCodeCamp.org` 的示例：
 
@@ -25,7 +25,7 @@ dashedName: step-11
 assert(document.querySelector('a'));
 ```
 
-你的锚点元素（`a`）应该有一个闭合标签。 闭合标签在 `<` 字符后面要有一个 `/`。
+你的锚元素（`a`）应该有一个结束标签。 闭合标签在 `<` 字符后面要有一个 `/`。
 
 ```js
 assert(code.match(/<\/a\>/));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index 1f8b959025e..3f577d3e950 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index 03cafe0acbd..d1c32a20309 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 下一个位置属性是 `absolute`。 当你为 `position` 属性使用 `absolute` 值时，该元素将从文档的正常流程中取出，然后其位置由 `top`、`right`、`bottom` 和 `left` 属性决定。
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
index 71cb505b5d4..48df20fd757 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64388945b59341057e955fbb.md
@@ -7,9 +7,9 @@ dashedName: step-4
 
 # --description--
 
-To populate the forum leaderboard with data, you will need to request the data from an API. This is known as an <dfn>asynchronous</dfn> operation, which means that tasks execute independently of the main program flow.
+为了用数据填充论坛排行榜，你需要从 API 请求数据。 这被称为<dfn>异步</dfn>操作，这意味着任务独立于主程序流执行。
 
-You can use the `async` keyword to create an asynchronous function, which returns a promise.
+你可以使用 `async` 关键字创建一个异步函数，该函数会返回一个 Promise。
 
 ```js
 const example = async () => {
@@ -17,23 +17,23 @@ const example = async () => {
 };
 ```
 
-Use the `async` keyword to create an asynchronous arrow function called `fetchData`.
+使用 `async` 关键字来创建一个名为 `fetchData` 的异步箭头函数。
 
 # --hints--
 
-You should use the `async` keyword to create an asynchronous arrow function called `fetchData`.
+你应该使用 `async` 关键字创建一个名为 `fetchData` 的异步箭头函数。
 
 ```js
 assert.match(code, /const\s+fetchData\s*=\s*async\s*\(\s*\)\s*=>\s*{\s*[^}]*\s*}/);
 ```
 
-`fetchData` should be defined.
+应该定义 `fetchData`。
 
 ```js
 assert.isDefined(fetchData);
 ```
 
-`fetchData` should be a function.
+`fetchData` 应该是一个函数。
 
 ```js
 assert.isFunction(fetchData);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
index 8a7cd849716..a57931e2d8e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c0ab6779047014ca69b4f.md
@@ -7,9 +7,9 @@ dashedName: step-6
 
 # --description--
 
-In the previous project, you used `fetch()` with the `.then()` method to perform logic after the promise was resolved. Now you will use the `await` keyword to handle the asynchronous nature of the `fetch()` method.
+在之前的项目中，你使用了 `fetch()` 和 `.then()` 方法在 Promise 解析后执行逻辑。 现在你将使用 `await` 关键字来处理 `fetch()` 方法的异步特性。
 
-The `await` keyword waits for a promise to resolve and returns the result.
+`await` 关键字等待一个 promise 解析并返回结果。
 
 ```js
 const example = async () => {
@@ -18,23 +18,23 @@ const example = async () => {
 }
 ```
 
-Inside the `try` block, create a constant called `res` and assign it `await fetch()`. For the `fetch` call, pass in the `forumLatest` variable.
+在 `try` 块中，创建一个名为 `res` 的常量，并将 `await fetch()` 赋值给它。 对于 `fetch` 调用，传入 `forumLatest` 变量。
 
 # --hints--
 
-You should have a constant called `res` inside your `try` block.
+你应该在你的 `try` 块中有一个名为 `res` 的常量。
 
 ```js
 assert.match(code, /\s*const\s+res/)
 ```
 
-You should assign `await fetch()` to your `res` variable.
+你应该将 `await fetch()` 赋值给你的 `res` 变量。
 
 ```js
 assert.match(code, /\s*const\s+res\s*=\s*await\s+fetch\(\s*(.*)\s*\)/);
 ```
 
-You should pass in the `forumLatest` constant to the `fetch` call.
+你应该将 `forumLatest` 常量传递给 `fetch` 调用。
 
 ```js
 assert.match(code, /const\s+fetchData\s*=\s*async\s*\(\s*\)\s*=>\s*{\s*try\s*{\s*const\s+res\s*=\s*await\s+fetch\(\s*forumLatest\s*\)\s*;?\s*}\s*catch\s*\(\s*err\s*\)\s*{\s*}\s*}/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
index bf9714e1358..15b3885fd07 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c14c8027369027334e802.md
@@ -7,19 +7,19 @@ dashedName: step-7
 
 # --description--
 
-You want to get the response body as a JSON object. The `.json()` method of your `res` variable returns a promise, which means you will need to `await` it.
+你想要将响应主体作为 JSON 对象获取。 你的 `res` 变量的 `.json()` 方法返回一个 Promise，这意味着你需要 `await` 它。
 
-Create a constant called `data` and assign it the value of `await res.json()`.
+创建一个名为 `data` 的常量，并将其赋值为 `await res.json()` 的结果。
 
 # --hints--
 
-You should have a `const` variable named `data`.
+你应该有一个名为 `data` 的 `const` 变量。
 
 ```js
 assert.match(code, /const\s+data/);
 ```
 
-You should assign `await res.json()` to the `data` variable.
+你应该将 `await res.json()` 分配给 `data` 变量。
 
 ```js
 assert.match(code, /\s*const\s+data\s*=\s*await\s+res\.json\(\s*\)\s*;?\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
index 9cbea20d529..c89cd344921 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c337176a83407d0cd915c.md
@@ -7,25 +7,25 @@ dashedName: step-8
 
 # --description--
 
-To view the data results, log the `data` variable to the console inside your `try` block.
+要查看数据结果，可以在 `try` 块中将 `data` 变量打印到控制台。
 
-Below your `fetchData` definition, call the function and open up the console to see the results.
+在 `fetchData` 定义的下面调用这个函数，然后打开控制台查看结果。
 
 # --hints--
 
-You should use `console.log` to log the `data` variable to the console.
+你应该使用 `console.log` 将 `data` 变量记录到控制台。
 
 ```js
 assert.match(code, /\s*console\.log\(\s*data\s*\)/);
 ```
 
-Your `console.log` should be inside the `try` block.
+你的 `console.log` 应该放在 `try` 块里面。
 
 ```js
 assert.match(code, /\s*try\s*{[\s\S]*\s*console\.log\(\s*data\s*\)[\s\S]*}\s*catch\s*\(\s*err\s*\)\s*{\s*}/);
 ```
 
-You should call the `fetchData()` function, after the `fetchData()` function is defined.
+你应该在定义 `fetchData()` 函数之后，再调用 `fetchData()` 函数。
 
 ```js
 assert.match(code, /}\s*;?\s*fetchData\(\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
index b073f55e70f..c1941635ca3 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c359312d030093352fe41.md
@@ -7,31 +7,31 @@ dashedName: step-10
 
 # --description--
 
-Now it is time to display the data on the page.
+现在是时候在页面上显示数据了。
 
-Start by creating an arrow function called `showLatestPosts`, which takes a single `data` parameter.
+首先创建一个名为 `showLatestPosts` 的箭头函数，它接收一个单一的 `data` 参数。
 
 # --hints--
 
-You should have an arrow function called `showLatestPosts`.
+你应该有一个名为 `showLatestPosts` 的箭头函数。
 
 ```js
 assert.match(code, /const\s+showLatestPosts\s*=\s*(\([^)]*\)|[^\s()]+)\s*=>\s*/);
 ```
 
-Your `showLatestPosts` function should have a `data` parameter.
+你的 `showLatestPosts` 函数应该有一个 `data` 参数。
 
 ```js
 assert.match(code, /showLatestPosts\s*=\s*(\(\s*data\s*\)|data)\s*=>/);
 ```
 
-`showLatestPosts` should be defined.
+应该定义 `showLatestPosts`。
 
 ```js
 assert.isDefined(showLatestPosts);
 ```
 
-`showLatestPosts` should be a function.
+`showLatestPosts` 应该是一个函数。
 
 ```js
 assert.isFunction(showLatestPosts);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
index 29102d0e687..f174fa97c10 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c565936a10109b3f59326.md
@@ -7,19 +7,19 @@ dashedName: step-11
 
 # --description--
 
-As you build out your `showLatestPosts()` function, you'll need to call it to see your changes.
+当你构建 `showLatestPosts()` 函数时，你需要调用它来查看你的更改。
 
-Call the `showLatestPosts()` function at the end of your `try` block and pass in `data` for the argument.
+在 `try` 块的末尾调用 `showLatestPosts()` 函数，并传入 `data` 作为参数。
 
 # --hints--
 
-You should call `showLatestPosts()` at the end of your `try` block.
+你应该在 `try` 代码块的末尾调用 `showLatestPosts()`。
 
 ```js
 assert.match(code, /\s*showLatestPosts\(.*\)\s*;?\s*/);
 ```
 
-You should pass `data` as the argument to `showLatestsPosts()`.
+你应该将 `data` 作为参数传递给 `showLatestsPosts()`。
 
 ```js
 assert.match(code, /\s*showLatestPosts\(\s*data\s*\)\s*;?\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
index 106a5f49e00..32c82d24704 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c56790fac5409eb5ec6f9.md
@@ -7,11 +7,11 @@ dashedName: step-12
 
 # --description--
 
-Back in your `showLatestPosts()` function, use destructuring to get the `topic_list` and `users` properties from the `data` object.
+回到你的 `showLatestPosts()` 函数，使用解构赋值从 `data` 对象中获取 `topic_list` 和 `users` 属性。
 
 # --hints--
 
-You should use `const` to destructure `topic_list` and `users` from the `data` object.
+你应该使用 `const` 从 `data` 对象中解构 `topic_list` 和 `users`。
 
 ```js
 assert.match(code, /const\s*{\s*(topic_list\s*,\s*users|users\s*,\s*topic_list)\s*}\s*=\s*data/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
index 5e9136d7ebf..c28f63683e0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c8d9a73965c0a26d7f634.md
@@ -7,13 +7,13 @@ dashedName: step-13
 
 # --description--
 
-The `topic_list` object contains a `topics` array which contains the latest topics posted to the forum.
+`topic_list` 对象包含一个 `topics` 数组，其中包含论坛上最新发布的话题。
 
-Destructure the `topics` array from the `topic_list` object.
+从 `topic_list` 对象中解构出 `topics` 数组。
 
 # --hints--
 
-You should use `const` to destructure the `topics` variable from the `topic_list` object.
+你应该使用 `const` 从 `topic_list` 对象中解构 `topics` 变量。
 
 ```js
 assert(code.match(/\s*const\s*\{\s*topics\s*\}\s*=\s*topic_list\s*;?\s*/g));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
index 05ad426544a..edd0ccaf5c6 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c90830bbeb40ab15148a6.md
@@ -7,33 +7,33 @@ dashedName: step-14
 
 # --description--
 
-Now it is time to start populating the data inside the `postsContainer`.
+现在是时候开始填充 `postsContainer` 内的数据了。
 
-Start by calling the `map()` method on your `topics` array. For the callback function, use an empty arrow function that takes `item` as a parameter.
+首先对你的 `topics` 数组调用 `map()` 方法。 对于回调函数，请使用一个空箭头函数，并将 `item` 作为参数。
 
-Then assign the result of the `map()` method to `postsContainer.innerHTML`.
+然后将 `map()` 方法的结果赋值给 `postsContainer.innerHTML`。
 
 # --hints--
 
-You should use the `map()` method on the `topics` array.
+你应该对 `topics` 数组使用 `map()` 方法。
 
 ```js
 assert.match(code, /topics\.map\(.*/);
 ```
 
-You should add a callback function to the `map()` method that has `item` for the parameter name.
+你应该给 `map()` 方法添加一个回调函数，该回调函数的参数名称应该是 `item`。
 
 ```js
 assert.match(code, /topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>/g);
 ```
 
-The body of the callback function should be empty.
+回调函数的函数体应为空。
 
 ```js
 assert.match(code, /topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>\s*{\s*}/g);
 ```
 
-You should assign the result of the `map()` method to `postsContainer.innerHTML`.
+你应该将 `map()` 方法的结果赋值给 `postsContainer.innerHTML`。
 
 ```js
 assert.match(code, /postsContainer\.innerHTML\s*=\s*topics\.map\(\s*(\(\s*item\s*\)|item)\s*=>\s*{\s*}/g);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
index 7895b97eeb7..97378651fa7 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643c95001ff61f0b3c39ce71.md
@@ -7,7 +7,7 @@ dashedName: step-15
 
 # --description--
 
-Inside the `map` method, destructure the following properties from the `item` object:
+在 `map` 方法中，从 `item` 对象中解构出以下属性：
 
 * `id`
 * `title`
@@ -20,7 +20,7 @@ Inside the `map` method, destructure the following properties from the `item` ob
 
 # --hints--
 
-You should destructure the `id`, `title`, `views`, `posts_count`, `slug`, `posters`, `category_id`, `bumped_at` properties from the `item` object.
+你应该从 `item` 对象中解构 `id`、`title`、`views`、`posts_count`、`slug`、`posters`、`category_id`、`bumped_at` 属性。
 
 ```js
 assert.match(code, /const\s*\{\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,\s*(id|title|views|posts_count|slug|posters|category_id|bumped_at)\s*,?\s*\}\s*=\s*item/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
index feaee633965..49cb29c85c9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/643e9ee64efc77016fa3397c.md
@@ -7,11 +7,11 @@ dashedName: step-18
 
 # --description--
 
-Inside your `tr` element, add five empty `td` elements.
+在你的 `tr` 元素内部，添加五个空的 `td` 元素。
 
 # --hints--
 
-Your `tr` element should contain five `td` elements.
+你的 `tr` 元素应该包含五个 `td` 元素。
 
 ```js
 assert(/return\s*`\s*<tr>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<td>\s*\S*\s*<\/td>\s*<\/tr>\s*`/.test(code));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
index 2a0d609fdf2..61aca08bf0e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6444062a33ab4c03d0c2e9f5.md
@@ -1,19 +1,19 @@
 ---
 id: 6444062a33ab4c03d0c2e9f5
-title: Step 24
+title: 步骤 24
 challengeType: 0
 dashedName: step-24
 ---
 
 # --description--
 
-To display the time since the last post, call the `timeAgo` function and pass in the `bumped_at` variable for the argument. Place this function call inside the last `td` element.
+要显示距离上个帖子的时间，请调用 `timeAgo` 函数，并传入 `bumped_at` 变量作为参数。 将此函数调用放在最后一个 `td` 元素中。
 
-Once you make those changes, scroll across the table to see the new values displayed in the `Activity` column.
+一旦你进行了这些更改，请滚动表格以查看 `Activity` 栏中显示的新值。
 
 # --hints--
 
-You should call the `timeAgo` function with the argument of `bumped_at` in the last `td` element.
+你应该在最后一个 `td` 元素中以 `bumped_at` 作为参数调用 `timeAgo` 函数。
 
 ```js
 assert(code.match(/<tr>(?:.*<td>.*<\/td>\s*){2}<td>\s*\$\{\s*timeAgo\(\s*bumped_at\s*\)\s*\}\s*<\/td>\s*<\/tr>/s));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
index 0dd6b849e77..7b19659f5d8 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64440a50d076c204051f2cc0.md
@@ -1,47 +1,47 @@
 ---
 id: 64440a50d076c204051f2cc0
-title: Step 25
+title: 步骤 25
 challengeType: 0
 dashedName: step-25
 ---
 
 # --description--
 
-You need a function to convert view counts to a more readable format. For example, if the view count is `1000`, it should display as `1k` and if the view count is `100,000` it should display as `100k`.
+你需要一个函数来将浏览量转换为更易读的格式。 例如，如果浏览量是 `1000`，应该显示为 `1k`，如果浏览量是 `100,000`，应该显示为 `100k`。
 
-Create a `viewCount` function with a `views` parameter. If `views` is greater than or equal to `1000`, return a string with the `views` value divided by `1000` and the letter `k` appended to it. Make sure to round `views / 1000` down to the nearest whole number.
+创建一个带有 `views` 参数的 `viewCount` 函数。 如果 `views` 大于或等于 `1000`，则返回一个字符串，其中 `views` 的值除以 `1000` 并附加字母 `k`。 确保将 `views / 1000` 向下舍入到最接近的整数。
 
-Otherwise, return the `views` value.
+否则，返回 `views` 值。
 
-For example, if `views` is `1000` your return value should be the string `1k`.
+例如，如果 `views` 是 `1000`，你的返回值应该是字符串 `1k`。
 
 # --hints--
 
-You should have a function called `viewCount`.
+你应该有一个名为 `viewCount` 的函数。
 
 ```js
 assert.isFunction(viewCount);
 ```
 
-Your `viewCount` function should have a parameter called `views`.
+你的 `viewCount` 函数应该有一个名为 `views` 的参数。
 
 ```js
 assert.match(viewCount.toString(), /\(?views\)?/);
 ```
 
-Your `viewCount` function should return the string `1k` when `views` is `1000`.
+你的 `viewCount` 函数在 `views` 是 `1000` 时应返回字符串 `1k`。
 
 ```js
 assert.strictEqual(viewCount(1000), "1k");
 ```
 
-Your `viewCount` function should return the string `100k` when `views` is `100000`.
+你的 `viewCount` 函数在 `views` 值为 `100000` 时应返回字符串 `100k`。
 
 ```js
 assert.strictEqual(viewCount(100000), "100k");
 ```
 
-Your `viewCount` function should return the correct string when `views` is greater than or equal to `1000`.
+当 `views` 大于或等于 `1000` 时，`viewCount` 函数应返回正确的字符串。
 
 ```js
 assert.strictEqual(viewCount(10000), "10k");
@@ -49,13 +49,13 @@ assert.strictEqual(viewCount(35000), "35k");
 assert.strictEqual(viewCount(99999), "99k");
 ```
 
-Your `viewCount` function should return `views` when `views` is `200`.
+当 `views` 是 `200` 时，你的 `viewCount` 函数应该返回 `views`。
 
 ```js
 assert.strictEqual(viewCount(200), 200);
 ```
 
-Your `viewCount` function should return `views` when `views` is less than `1000`.
+你的 `viewCount` 函数应在 `views` 小于 `1000` 时返回 `views`。
 
 ```js
 assert.strictEqual(viewCount(999), 999);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
index 11695823736..fc19032164f 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644fb1d7f0257702a0c935cf.md
@@ -1,30 +1,30 @@
 ---
 id: 644fb1d7f0257702a0c935cf
-title: Step 41
+title: 步骤 41
 challengeType: 0
 dashedName: step-41
 ---
 
 # --description--
 
-Next, return an anchor element inside template literals. For the `href` attribute, assign the value of the `url` constant.
+接下来，在模板字面量中返回一个锚元素。 对于 `href` 属性，赋值为 `url` 常量的值。
 
 # --hints--
 
-You should return an anchor element inside template literals.
+你应该在模板字面量中返回一个锚元素。
 
 ```js
 assert.match(code, /return\s+`<a[^>]*>.*<\/a>`/)
 ```
 
-You should add the `href` attribute inside the opening anchor tag.
+你应该在开始锚标签里面添加 `href` 属性。
 
 ```js
 const anchorTagWithHref = /return\s+`<a[^>]*href\s*=\s*('|")[^'"]*\1[^>]*>.*<\/a>`/g;
 assert(code.match(anchorTagWithHref));
 ```
 
-You should set the value of the `href` attribute to `${url}`.
+你应该将 `href` 属性的值设置为 `${url}`。
 
 ```js
 const hrefValue = /return\s+`<a[^>]*href\s*=\s*('|")\s*\${url}\s*\1[^>]*>.*<\/a>`/g;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
index 596401a515e..bf0a4277fd3 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645763874fd6d901c273db29.md
@@ -1,19 +1,19 @@
 ---
 id: 645763874fd6d901c273db29
-title: Step 43
+title: 步骤 43
 challengeType: 0
 dashedName: step-43
 ---
 
 # --description--
 
-Inside the first `td` element, add an embedded expression `${}`. Inside that expression, call the `forumCategory` function with the argument of `category_id`.
+在第一个 `td` 元素里面，添加一个内嵌表达式 `${}`。 在该表达式中，使用 `category_id` 作为参数来调用 `forumCategory` 函数。
 
-Now, you should see a category displayed underneath each post topic.
+现在，你应该在每个帖子主题下看到一个类别。
 
 # --hints--
 
-You should call the `forumCategory` function with the argument of `category_id`
+你应该用 `category_id` 参数调用 `forumCategory` 函数。
 
 ```js
 const forumCategoryValue = /\s*\${\s*forumCategory\(\s*category_id\s*\)\s*}/g;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
index 7e0f6afa5a9..13c33033ae7 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f06144bc0dc0143a5a3a2.md
@@ -1,25 +1,25 @@
 ---
 id: 645f06144bc0dc0143a5a3a2
-title: Step 44
+title: 步骤 44
 challengeType: 0
 dashedName: step-44
 ---
 
 # --description--
 
-Each forum post will include a list of user avatar images which represent all of the users participating in the conversation for that topic.
+每个论坛帖子将包括一组用户头像图像，代表参与该话题讨论的所有用户。
 
-Start by creating an arrow function called `avatars`, with two parameters called `posters` and `users`.
+首先创建一个名为 `avatars` 的箭头函数，带有两个参数 `posters` 和 `users`。
 
 # --hints--
 
-You should have an empty arrow function called `avatars`.
+你应该有一个名为 `avatars` 的空箭头函数。
 
 ```js
 assert.match(code, /const\s+avatars\s*=\s*\([\s\S]*\)\s*=>\s*{\s*}/);
 ```
 
-You should have the parameters named `posters` and `users` in the function named `avatars`.
+你应该在名为 `avatars` 的函数中将参数命名为 `posters` 和 `users`。
 
 ```js
 assert.match(code, /const\s+avatars\s*=\s*\(\s*(posters|users)\s*,\s*(posters|users)\s*\)\s*=>\s*{\s*}/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
index bdff26ea234..c312be5e6b4 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7231271ab1012bc659b8.md
@@ -1,17 +1,17 @@
 ---
 id: 645f7231271ab1012bc659b8
-title: Step 47
+title: 步骤 47
 challengeType: 0
 dashedName: step-47
 ---
 
 # --description--
 
-Next, check if the user exists. Add an `if` statement with `user` for the condition.
+接下来，检查用户是否存在。 添加一个以 `user` 为条件的 `if` 语句。
 
 # --hints--
 
-You should create an `if` statement with the condition of `user`.
+你应该创建一个条件为 `user` 的 `if` 语句。
 
 ```js
 assert(code.match(/if\s*\(\s*user\s*\)\s*{\s*/));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
index 2075856e463..0512c870259 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f764c37de33015ded1273.md
@@ -1,33 +1,33 @@
 ---
 id: 645f764c37de33015ded1273
-title: Step 48
+title: 步骤 48
 challengeType: 0
 dashedName: step-48
 ---
 
 # --description--
 
-To customize the avatar's size, you can set it to a value of `30`.
+要自定义头像的大小，你可以将其设置为 `30`。
 
-Start by creating a constant called `avatar`. Then assign it the result of using the `replace` method on `user.avatar_template`.
+首先创建一个名为 `avatar` 的常量。 然后使用 `replace` 方法对 `user.avatar_template` 进行处理并将结果赋值给它。
 
-For the `replace` method, use `/{size}/` for the first argument and the number `30` for the second argument.
+对于 `replace` 方法，使用 `/{size}/` 作为第一个参数，使用数字 `30` 作为第二个参数。
 
 # --hints--
 
-You should have a constant called `avatar`.
+你应该有一个名为 `avatar` 的常量。
 
 ```js
 assert(code.match(/const\s+avatar\s*=/));
 ```
 
-You should assign `user.avatar_template.replace()` to your `avatar` constant.
+你应该将 `user.avatar_template.replace()` 赋值给你的 `avatar` 常量。
 
 ```js
 assert(code.match(/const\s+avatar\s*=\s*user\.avatar_template\.replace\(\s*.*\s*\)/));
 ```
 
-You should have `/{size}/` for the first argument and the number `30` for the second argument for the `replace` method.
+你应该在 `replace` 方法中将第一个参数设为 `/{size}/`，第二个参数设为数字 `30`。
 
 ```js
 assert(code.match(/const\s+avatar\s*=\s*user\.avatar_template\.replace\(\s*([/'"]){size}\1\s*,\s*30\s*\)/));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
index e282057b308..26b26b92d16 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f7879ebbdb201892e55e1.md
@@ -1,29 +1,29 @@
 ---
 id: 645f7879ebbdb201892e55e1
-title: Step 49
+title: 步骤 49
 challengeType: 0
 dashedName: step-49
 ---
 
 # --description--
 
-Next, you will construct the `userAvatarUrl`.
+接下来，你将构建 `userAvatarUrl`。
 
-Start by creating a constant called `userAvatarUrl`. Then use a ternary operator to check if `avatar` starts with `"/user_avatar/"`.
+首先创建一个名为 `userAvatarUrl` 的常量。 Then use a ternary operator to check if `avatar` starts with `"/user_avatar/"`.
 
-If so, use the `concat` method to concatenate `avatar` to `avatarUrl`. Otherwise return `avatar`.
+如果是这样，使用 `concat` 方法将 `avatar` 连接到 `avatarUrl`。 否则返回 `avatar`。
 
-This will ensure the avatar URL is correctly formed whether it's a relative or absolute URL.
+这将确保头像 URL 无论是相对 URL 还是绝对 URL 都能正确形成。
 
 # --hints--
 
-You should have a constant named `userAvatarUrl`.
+你应该有一个名为 `userAvatarUrl` 的常量。
 
 ```js
 assert(code.match(/const\s+userAvatarUrl\s*=/));
 ```
 
-Your `ternary` should check if `avatar` starts with `"/user_avatar/"` and return `avatarUrl.concat(avatar)` or `avatar`.
+你的 `ternary` 应该检查 `avatar` 是否以 `"/user_avatar/"` 开头，并返回 `avatarUrl.concat(avatar)` 或者 `avatar`。
 
 ```js
 assert(code.match(/const\s+userAvatarUrl\s*=\s*(?:avatar\.startsWith\(\s*('|")\/user_avatar\/\1\s*\)|\/\^\\\/user_avatar\\\/\/\.test\(\s*avatar\s*\))\s*\?\s*avatarUrl\.concat\(\s*avatar\s*\)\s*:\s*avatar/));
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
index 314d50057e6..1f761af21f9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/645f8615fa144d01c476b22c.md
@@ -1,28 +1,28 @@
 ---
 id: 645f8615fa144d01c476b22c
-title: Step 50
+title: 步骤 50
 challengeType: 0
 dashedName: step-50
 ---
 
 # --description--
 
-Lastly, you will need to return the image for the user avatar.
+最后，你需要返回用户头像的图片。
 
-Start by adding a `return` followed by a set of template literals. Inside the template literals, add an `img` element.
+首先添加一个 `return`，后面是模板字面量。 在模板字面量中添加一个 `img` 元素。
 
-Inside the `img` tag, add a `src` attribute with the value of `${userAvatarUrl}`. For the `alt` attribute, add a value of `${user.name}`.
+Inside the `img` tag, add a `src` attribute with the value of `${userAvatarUrl}`. 对于 `alt` 属性，添加 `${user.name}` 的值。
 
 # --hints--
 
-You should return an empty template literal.
+你应该返回一个空的模板字符串。
 
 ```js
 const emptyTemplateLiteral = /return\s*`(.*)`/;
 assert(code.match(emptyTemplateLiteral));
 ```
 
-You should have an `img` element inside the template literal.
+你应该在模板字面量中包含一个 `img` 元素。
 
 ```js
 const imgTag = /return\s*`<img[^>]*\\?>`/g;
@@ -36,21 +36,21 @@ const imgTagWithSrc = /return\s*`<img[^>]*src\s*=\s*('|")[^'"]*\1[^>]*\\?>`/g;
 assert(code.match(imgTagWithSrc));
 ```
 
-You should set the value for the `src` attribute to the constant named `userAvatarUrl`.
+你应该将 `src` 属性的值设置为名为 `userAvatarUrl` 的常量。
 
 ```js
 const srcValue = /return\s*`<img[^>]*src\s*=\s*('|")\s*\${userAvatarUrl}\s*\1[^>]*\\?>`/g;
 assert(code.match(srcValue));
 ```
 
-You should have an `alt` attribute after the `src` attribute.
+在 `src` 属性之后应该有一个 `alt` 属性。
 
 ```js
 const imageTagWithSrcAndAlt = /return\s*`<img[^>]*src\s*=\s*('|")[^'"]*\1[^>]*alt\s*=\s*('|")[^'"]*\2[^>]*\\?>`/g;
 assert(code.match(imageTagWithSrcAndAlt));
 ```
 
-You should set the value of the `alt` attribute to the constant named `user.name`.
+你应该将 `alt` 属性的值设置为名为 `user.name` 的常量。
 
 ```js
 const altValue = /return\s*`<img[^>]*src\s*=\s*('|")\s*\${userAvatarUrl}\s*\1[^>]*alt\s*=\s*('|")\s*\${user\.name}\s*\2[^>]*\\?>`/g;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
index 853aaf943db..d03243fd0a9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646474a88d0d4a016f895ba8.md
@@ -1,26 +1,26 @@
 ---
 id: 646474a88d0d4a016f895ba8
-title: Step 52
+title: 步骤 52
 challengeType: 0
 dashedName: step-52
 ---
 
 # --description--
 
-For the remaining steps, you will add the functionality to display the user avatars.
+在接下来的步骤中，你将添加显示用户头像的功能。
 
-Inside the second `td` element, add a `div` element with a class name of `avatar-container`.
+在第二个 `td` 元素内，添加一个类名为 `avatar-container` 的 `div` 元素。
 
 # --hints--
 
-You should have a `div` element inside the second `td` element.
+你应该在第二个 `td` 元素内有一个 `div` 元素。
 
 ```js
 const joinTest =  /<div\b[^>]*>([\s\S]*?)<\/div>/gm;
 assert(code.match(joinTest));
 ```
 
-Your opening `div` tag should have a class attribute with the value of `avatar-container`.
+你的 `div` 标签应该有一个 class 属性，值为 `avatar-container`。
 
 ```js
 const divRegexTest = /<div\b[^>]*\bclass\s*=\s*"[^"]*\bavatar-container\b[^"]*"[^>]*>([\s\S]*?)<\/div>/gm;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
index 67618fe3277..b4b5362600a 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64648c3254e52901e36e7703.md
@@ -1,26 +1,26 @@
 ---
 id: 64648c3254e52901e36e7703
-title: Step 53
+title: 步骤 53
 challengeType: 0
 dashedName: step-53
 ---
 
 # --description--
 
-Inside the `div` element, call the `avatars` function and pass in the arguments of `posters` and `users`.
+在 `div` 元素内部，调用 `avatars` 函数，并传入 `posters` 和 `users` 作为参数。
 
-Now you should see the avatars displayed on the page.
+现在你应该能看到页面上显示的头像了。
 
 # --hints--
 
-You should call the function named `avatars`.
+你应该调用名为 `avatars` 的函数。
 
 ```js
 const avatarsTest = /\$\{\s*avatars\s*\(\s*[^)]*\s*\)\s*\}/gm;
 assert(code.match(avatarsTest));
 ```
 
-Your function call should have the arguments of `posters` and `users`.
+你的函数调用应包含参数 `posters` 和 `users`。
 
 ```js
 const avatarsTest = /\$\{\s*avatars\s*\(\s*posters\s*,\s*users\s*\)\s*\}/gm;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
index 65f4243e8dd..374852047c5 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/646494e11d0cab03caee204c.md
@@ -1,21 +1,21 @@
 ---
 id: 646494e11d0cab03caee204c
-title: Step 54
+title: 步骤 54
 challengeType: 0
 dashedName: step-54
 ---
 
 # --description--
 
-Your project is almost complete. It is just missing one last piece.
+你的项目快完成了。 就差最后一个部分了。
 
-Users should be able to click on any post title and be directed to the actual post on the [freeCodeCamp forum](https://forum.freecodecamp.org/).
+用户应该能够点击任何帖子标题，并被引导到 [freeCodeCamp 论坛](https://forum.freecodecamp.org/) 上的实际帖子。
 
-Start by changing the existing paragraph element inside the first `td` element to be an anchor element.
+首先将第一个 `td` 元素内的现有段落元素改为锚元素。
 
 # --hints--
 
-You should replace the `p` element with an `a` element.
+你应该将 `p` 元素替换为 `a` 元素。
 
 ```js
 const regex = /<a\s+class\s*=\s*('|")post-title\1\s*>(?:.|\n)*?<\/a>/;
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
index c14f55e1d30..1ff6589cdbf 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/64649b108df035051cb2ba2d.md
@@ -1,25 +1,25 @@
 ---
 id: 64649b108df035051cb2ba2d
-title: Step 55
+title: 步骤 55
 challengeType: 0
 dashedName: step-55
 ---
 
 # --description--
 
-For the opening `a` tag, set the `target` attribute to `_blank`. Then, set the `href` attribute to `${forumTopicUrl}${slug}/${id}`.
+对于开始 `a` 标签，将 `target` 属性设置为 `_blank`。 然后，将 `href` 属性设置为 `${forumTopicUrl}${slug}/${id}`。
 
-And with those changes, your freeCodeCamp forum leaderboard project is now complete!
+有了这些更改，你的 freeCodeCamp 论坛排行榜项目现在已经完成了！
 
 # --hints--
 
-Your opening anchor tag should have a `target` attribute set to `_blank`.
+你的开始锚标签应将 `target` 属性设置为 `_blank`。
 
 ```js
 assert.match(code, /<a\s+(?:[^>]*\s+)?target\s*=\s*('|")_blank\1(?:\s+[^>]*)?>.*<\/a>/s);
 ```
 
-Your opening anchor tag should have an `href` attribute set to `${forumTopicUrl}${slug}/${id}`.
+你的开始锚标签应该设置一个 `href` 属性，其值为 `${forumTopicUrl}${slug}/${id}`。
 
 ```js
 assert.match(code, /<a\s+(?:[^>]*\s+)?href\s*=\s*('|")\${forumTopicUrl}\${slug}\/\${id}\1(?:\s+[^>]*)?>.*<\/a>/s);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
index 1a860692146..9a21fe6cc7c 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md
@@ -7,33 +7,33 @@ dashedName: step-1
 
 # --description--
 
-In this project, you will build a freeCodeCamp forum leaderboard that displays the latest topics, users, and replies from the [freeCodeCamp forum](https://forum.freecodecamp.org/). HTML和CSS已经为您准备好了。 请随意使用。
+在这个项目中，你将构建一个 freeCodeCamp 论坛排行榜，显示来自 [freeCodeCamp论坛](https://forum.freecodecamp.org/) 的最新话题、用户和回复。 HTML和CSS已经为您准备好了。 请随意使用。
 
-When you are ready, use `const` to declare a `forumLatest` variable and assign it the string `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json`.
+当你准备好时，使用 `const` 声明一个 `forumLatest` 变量，并将 `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` 字符串赋值给它。
 
-Below that, create another `const` variable called `forumTopicUrl` and assign it the string `https://forum.freecodecamp.org/t/`.
+在那下面创建另一个 `const` 变量，命名为 `forumTopicUrl`，并将字符串 `https://forum.freecodecamp.org/t/` 赋值给它。
 
 # --hints--
 
-You should declare a `forumLatest` variable with `const`.
+你应该使用 `const` 声明一个 `forumLatest` 变量。
 
 ```js
 assert.match(code, /const\s+forumLatest\s*=/);
 ```
 
-You should assign `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` to your `forumLatest` variable.
+你应该把 `https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json` 赋值给你的 `forumLatest` 变量。
 
 ```js
 assert.match(code, /const\s+forumLatest\s*=\s*('|")https:\/\/cdn\.freecodecamp\.org\/curriculum\/forum-latest\/latest\.json\1\s*/);
 ```
 
-You should declare a `forumTopicUrl` variable with `const`.
+你应该用 `const` 声明一个 `forumTopicUrl` 变量。
 
 ```js
 assert.match(code, /const\s+forumTopicUrl\s*=/);
 ```
 
-You should assign `https://forum.freecodecamp.org/t/` to your `forumTopicUrl` variable.
+你应该将 `https://forum.freecodecamp.org/t/` 分配给你的 `forumTopicUrl` 变量。
 
 ```js
 assert.match(code, /const\s+forumTopicUrl\s*=\s*('|")https:\/\/forum\.freecodecamp\.org\/t\/\1\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
index 83bdd89c204..9e54e690cff 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65738cc6cba1825b14806b3d.md
@@ -7,31 +7,31 @@ dashedName: step-2
 
 # --description--
 
-Next, create a `const` variable called `forumCategoryUrl` and assign it the string `https://forum.freecodecamp.org/c/`.
+接下来，创建一个 `const` 变量，名为 `forumCategoryUrl`，并将其赋值为字符串 `https://forum.freecodecamp.org/c/`。
 
-Below that, create another `const` variable called `avatarUrl` and assign it the string `https://sea1.discourse-cdn.com/freecodecamp`.
+在其下方，创建另一个 `const` 变量，名为 `avatarUrl`，并将其赋值为字符串 `https://sea1.discourse-cdn.com/freecodecamp`。
 
 # --hints--
 
-You should declare a `forumCategoryUrl` variable with `const`.
+你应该用 `const` 声明一个 `forumCategoryUrl` 变量。
 
 ```js
 assert.match(code, /const\s+forumCategoryUrl\s*=/);
 ```
 
-You should assign `https://forum.freecodecamp.org/c/` to your `forumCategoryUrl` variable.
+你应该将 `https://forum.freecodecamp.org/c/` 分配给你的 `forumCategoryUrl` 变量。
 
 ```js
 assert.match(code, /const\s+forumCategoryUrl\s*=\s*('|")https:\/\/forum\.freecodecamp\.org\/c\/\1\s*/);
 ```
 
-You should declare an `avatarUrl` variable with `const`.
+你应该使用 `const` 声明一个 `avatarUrl` 变量。
 
 ```js
 assert.match(code, /const\s+avatarUrl\s*=/);
 ```
 
-You should assign `https://sea1.discourse-cdn.com/freecodecamp` to your `avatarUrl` variable.
+你应该将 `https://sea1.discourse-cdn.com/freecodecamp` 分配给你的 `avatarUrl` 变量。
 
 ```js
 assert.match(code, /const\s+avatarUrl\s*=\s*('|")https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\1\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
index c7ab1991587..34212817346 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65739e21dbdf776ccfbf2df5.md
@@ -7,27 +7,27 @@ dashedName: step-9
 
 # --description--
 
-If there is an error from the `fetch` call, the `catch` block will handle it.
+如果 `fetch` 调用发生错误， `catch` 块将会处理它。
 
-Inside the `catch` block, add a `console.log` to log the `err` parameter.
+在 `catch` 块中，添加 `console.log` 以记录 `err` 参数。
 
-Also, remove your `console.log(data);` from your `try` block now that you understand what is being returned from the `fetch` call.
+此外，既然你已经了解了 `fetch` 调用返回的内容，现在可以从你的 `try` 块中删除 `console.log(data);`。
 
 # --hints--
 
-You should use `console.log` to log the `err` variable.
+你应该使用 `console.log` 来记录 `err` 变量。
 
 ```js
 assert.match(code, /\s*console\.log\(\s*err\s*\)/);
 ```
 
-Your `console.log` should be inside the `catch` block.
+你的 `console.log` 应该放在 `catch` 块里面。
 
 ```js
 assert.match(code, /\s*try\s*{[^}]*\s*}\s*catch\s*\(\s*err\s*\)\s*{[^}]*\s*console\.log\(\s*err\s*\)[^}]*}/);
 ```
 
-You should remove `console.log(data);` from the `try` block.
+你应该从 `try` 块中移除 `console.log(data);`。
 
 ```js
 assert.notMatch(code, /\s*console\.log\(\s*data\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
index 4e215f357c9..8b441d333f6 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/6576076879130f6cf7426e82.md
@@ -1,25 +1,25 @@
 ---
 id: 6576076879130f6cf7426e82
-title: Step 27
+title: 步骤 27
 challengeType: 0
 dashedName: step-27
 ---
 
 # --description--
 
-Each of the forum topics includes a category like Python or JavaScript. In the next few steps, you will build out a category object which holds all of the forum categories and `classNames` for the styling.
+每个论坛主题都包括一个类别，比如 Python 或 JavaScript。 在接下来的几个步骤中，你将构建一个类别对象，该对象包含所有论坛类别和用于样式的 `classNames`。
 
-Start by creating a new constant called `allCategories` and assign it the value of an empty object.
+首先创建一个名为 `allCategories` 的新常量，并将其赋值为空对象。
 
 # --hints--
 
-You should have a constant called `allCategories`.
+你应该有一个名为 `allCategories` 的常量。
 
 ```js
 assert.match(code, /const\s+allCategories\s*=/)
 ```
 
-You should assign an empty object to the `allCategories` variable.
+你应该给 `allCategories` 变量赋一个空对象。
 
 ```js
 assert.match(code, /const\s+allCategories\s*=\s*{\s*}\s*/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
index c1b58274d42..800f47e5da0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760954561c726e832a0cc8.md
@@ -1,49 +1,49 @@
 ---
 id: 65760954561c726e832a0cc8
-title: Step 28
+title: 步骤 28
 challengeType: 0
 dashedName: step-28
 ---
 
 # --description--
 
-Inside your `allCategories` object, add a new key for the number `299` with a value of an empty object.
+在你的 `allCategories` 对象中，添加一个新的键 `299`，它的值为空对象。
 
-Inside that object, add a property with a key of `category` and a string value of `Career Advice`. Below that property, add another key called `className` with a string value of `career`.
+在那个对象内部，添加一个键为 `category`，值为 `Career Advice` 的属性。 在该属性下面，再添加一个名为 `className` 的键，其值为字符串 `career`。
 
 # --hints--
 
-Your `allCategories` object should have a `299` property.
+你的 `allCategories` 对象应该有一个 `299` 属性。
 
 ```js
 assert.property(allCategories, '299');
 ```
 
-Your `299` value should be an object.
+你的 `299` 值应该是一个对象。
 
 ```js
 assert.isObject(allCategories['299'])
 ```
 
-Your `299` object should have a `category` property.
+你的 `299` 对象应具有一个 `category` 属性。
 
 ```js
 assert.property(allCategories['299'], 'category');
 ```
 
-Your `category` property should be set to the string `Career Advice`.
+你的 `category` 属性应该设置为字符串 `Career Advice`。
 
 ```js
 assert.equal(allCategories["299"].category, 'Career Advice');
 ```
 
-Your `299` object should have a `className` property.
+你的 `299` 对象应该有一个 `className` 属性。
 
 ```js
 assert.property(allCategories['299'], 'className');
 ```
 
-Your `className` property should be set to the string `career`.
+你的 `className` 属性应设置为字符串 `career`。
 
 ```js
 assert.equal(allCategories["299"].className, 'career');
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
index 96230ca9d57..2d70e74b244 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760ce115eb06716baeb361.md
@@ -1,51 +1,51 @@
 ---
 id: 65760ce115eb06716baeb361
-title: Step 29
+title: 步骤 29
 challengeType: 0
 dashedName: step-29
 ---
 
 # --description--
 
-Add a new key for the number `409` with a value of an empty object.
+添加一个新的键为 `409`，值为一个空对象。
 
-Inside that object, add a property with a key of `category` and a string value of `Project Feedback`.
+在那个对象内部，添加一个键为 `category`、值为 `Project Feedback` 的字符串属性。
 
-Below that property, add another key called `className` with a string value of `feedback`.
+在该属性下，添加另一个名为 `className` 的键，并赋值为字符串 `feedback`。
 
 # --hints--
 
-Your `allCategories` object should have a `409` property.
+你的 `allCategories` 对象应该有一个 `409` 属性。
 
 ```js
 assert.property(allCategories, '409');
 ```
 
-Your `409` value should be an object.
+你的 `409` 值应该是一个对象。
 
 ```js
 assert.isObject(allCategories['409'])
 ```
 
-Your `409` object should have a `category` property.
+你的 `409` 对象应该有一个 `category` 属性。
 
 ```js
 assert.property(allCategories['409'], 'category');
 ```
 
-Your `category` property should be set to the string `Project Feedback`.
+你的 `category` 属性应设置为字符串 `Project Feedback`。
 
 ```js
 assert.equal(allCategories["409"].category, 'Project Feedback');
 ```
 
-Your `409` object should have a `className` property.
+你的 `409` 对象应该有一个 `className` 属性。
 
 ```js
 assert.property(allCategories['409'], 'className');
 ```
 
-Your `className` property should be set to the string `feedback`.
+你的 `className` 属性应该设置为字符串 `feedback`。
 
 ```js
 assert.equal(allCategories["409"].className, 'feedback');
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
index e66b5b6c5a2..0ee9d07e10e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/65760de70283687288fe70cf.md
@@ -1,51 +1,51 @@
 ---
 id: 65760de70283687288fe70cf
-title: Step 30
+title: 步骤 30
 challengeType: 0
 dashedName: step-30
 ---
 
 # --description--
 
-Add a new key for the number `417` with a value of an empty object.
+为数字 `417` 添加一个新的键，值为空对象。
 
-Inside that object, add a property with a key of `category` and a string value of `freeCodeCamp Support`.
+在该对象中，添加一个键为 `category` 和值为字符串 `freeCodeCamp Support` 的属性。
 
-Below that property, add another key called `className` with a string value of `support`.
+在该属性下，添加另一个名为 `className` 的键，其字符串值为 `support`。
 
 # --hints--
 
-Your `allCategories` object should have a `417` property.
+你的 `allCategories` 对象应该有一个 `417` 属性。
 
 ```js
 assert.property(allCategories, '417');
 ```
 
-Your `417` value should be an object.
+你的 `417` 值应该是一个对象。
 
 ```js
 assert.isObject(allCategories['417'])
 ```
 
-Your `417` object should have a `category` property.
+你的 `417` 对象应该有一个 `category` 属性。
 
 ```js
 assert.property(allCategories['417'], 'category');
 ```
 
-Your `category` property should be set to the string `freeCodeCamp Support`.
+你的 `category` 属性应设置为字符串 `freeCodeCamp Support`。
 
 ```js
 assert.equal(allCategories["417"].category, 'freeCodeCamp Support');
 ```
 
-Your `417` object should have a `className` property.
+你的 `417` 对象应有一个 `className` 属性。
 
 ```js
 assert.property(allCategories['417'], 'className');
 ```
 
-Your `className` property should be set to the string `support`.
+你的 `className` 属性应被设置为字符串 `support`。
 
 ```js
 assert.equal(allCategories["417"].className, 'support');
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
index 7cf08d5976d..5f281595ec0 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f415b76859a2736771607.md
@@ -27,13 +27,13 @@ if (condition) {
 assert.match(__helpers.removeJSComments(code), /if/);
 ```
 
-Your `if` statement should have `true` as the condition.
+你的 `if` 语句应以 `true` 作为条件。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*true\s*\)/);
 ```
 
-Your `if` body should log `"Condition is true"`.
+你的 `if` 主体应记录 `"Condition is true"`。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /if\s*\(\s*true\s*\)\s*\{\s*console\.log\(\s*("|')Condition is true\1\s*\);?/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
index b80f639277e..4dbeb0ed99d 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66458f0a05df478aa627629e.md
@@ -7,11 +7,11 @@ dashedName: step-82
 
 # --description--
 
-The text is gone again! Empty strings evaluate to `false`, making them a <dfn>falsy value</dfn>. You will learn more about truthy and falsy values in future projects.
+文字又不见了！ 空字符串的计算结果为 `false`，使其成为 <dfn>假值</dfn>。 你将在未来的项目中了解有关真值和假值的更多信息。
 
-In addition to `if` statements, JavaScript also has <dfn>else if</dfn> statements. `else if` statements allow you to check multiple conditions in a single block of code.
+除了 `if` 语句之外，JavaScript 还有 <dfn>else if</dfn> 语句。 `else if` 语句允许你在单个代码块中检查多个条件。
 
-Here is the syntax for an `else if` statement:
+以下是 `else if` 语句的语法：
 
 ```js
 if (condition1) {
@@ -23,27 +23,27 @@ if (condition1) {
 } 
 ```
 
-If the first condition is `false`, JavaScript will check the next condition in the chain. If the second condition is `false`, JavaScript will check the third condition, and so on.
+如果第一个条件为 `false`，JavaScript 将检查链中的下一个条件。 如果第二个条件为 `false`，JavaScript 将检查第三个条件，依此类推。
 
-Below your `if` statement, add an `else if` statement that checks if `5` is less than `10`. Then inside the body of the `else if` statement, log the string `"5 is less than 10"` to the console.
+在 `if` 语句下方，添加一个 `else if` 语句，检查 `5` 是否小于 `10`。 然后在 `else if` 语句的主体内，将字符串 `"5 is less than 10"` 记录到控制台。
 
-Check the console to see the results.
+检查控制台来查看结果。
 
 # --hints--
 
-You should have an `else if` statement.
+你应该有一个 `else if` 语句。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s+if\s*\(/);
 ```
 
-Your `else if` statement should check if `5` is less than `10`.
+你的 `else if` 语句应检查 `5` 是否小于 `10`。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s+if\s*\(\s*5\s*<\s*10\s*\)/);
 ```
 
-You should log the string `"5 is less than 10"` to the console.
+你应该将字符串 `"5 is less than 10"` 记录到控制台。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /console\.log\(\s*('|"|`)5\s+is\s+less\s+than\s+10\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
index 51eeda76adb..0523c50e228 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664599653fcd6e97104f9261.md
@@ -7,11 +7,11 @@ dashedName: step-83
 
 # --description--
 
-Sometimes you will want to run different code when all of the `if...else if` conditions are `false`. You can do this by adding an `else` block.
+有时，你会希望在所有 `if...else if` 条件均为 `false` 时运行不同的代码。 你可以通过添加 `else` 块来实现这一点。
 
-An `else` block will only evaluate if the conditions in the `if` and `else if` blocks are not met.
+仅当 `if` 和 `else if` 块中的条件不满足时，才会评估 `else` 块。
 
-Here the `else` block is added to the `else if` block.
+这里将 `else` 块添加到 `else if` 块。
 
 ```js
 
@@ -25,19 +25,19 @@ if (condition) {
 }
 ```
 
-Add an `else` block to the `else if` block. Inside the `else` block, log the string `"This is the else block"` to the console.
+向 `else if` 块添加 `else` 块。 在 `else` 块内，将字符串 `"This is the else block"` 记录到控制台。
 
-To see the results in the console, you can manually change the `<` in the `else if` statement to `>`. That will make the condition `false` and the `else` block will run.
+要在控制台中查看结果，可以手动将 `else if` 语句中的 `<` 更改为 `>`。 这将使得条件为 `false` 并且 `else` 块将运行。
 
 # --hints--
 
-You should have an `else` block.
+你应该有一个 `else` 块。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /else\s*\{/);
 ```
 
-Your `else` block should log the string `"This is the else block"` to the console.
+你的 `else` 块应该将字符串 `"This is the else block"` 记录到控制台。
 
 ```js
 assert.match(__helpers.removeJSComments(code), /console\.log\(\s*('|"|`)This\s+is\s+the\s+else\s+block\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
index f16086831f7..fd4e3fb54f8 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed9344ba3495e1f67f8ea.md
@@ -7,37 +7,37 @@ dashedName: step-14
 
 # --description--
 
-Now that you have reviewed declaration and initialization, remove the code you wrote for your review.
+现在你已经检查了声明和初始化，删除你为检查而编写的代码。
 
-Do not remove your `character` variable.
+不要删除你的 `character` 变量。
 
 # --hints--
 
-You should not have a `profession` variable.
+你不应该有 `profession` 变量。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /let\s+profession/);
 ```
 
-You should not have a `age` variable.
+你不应该有 `age` 变量。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /let\s+age/);
 ```
 
-You should not have a `console.log` statement for `age`.
+你不应该对 `age` 有 `console.log` 语句。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*age\s*\);/);
 ```
 
-You should not have a `console.log` statement for `profession`.
+你不应该对 `profession` 有 `console.log` 语句。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /console\.log\(\s*profession\s*\);/);
 ```
 
-You should still have your `character` variable.
+你应该仍然有你的 `character` 变量。
 
 ```js
 assert.strictEqual(character, "Hello");
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
index e5d45f40be2..6ea22a6c8e9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/664ed97c55a99e5ffab759dc.md
@@ -7,57 +7,57 @@ dashedName: step-13
 
 # --description--
 
-Before moving forward, you should take a moment to review the concepts you have learned.
+在继续之前，你应该花点时间复习一下已经学过的概念。
 
-Use the `let` keyword to declare a `profession` variable and an `age` variable. Initialize `profession` with the string `"teacher"`, but do not initialize `age` with any value.
+使用 `let` 关键字声明 `profession` 变量和 `age` 变量。 使用字符串 `"teacher"` 初始化 `profession`，但不要使用任何值初始化 `age`。
 
-Log both of your variables to the console to see the results.
+将两个变量记录到控制台以查看结果。
 
 # --hints--
 
-You should declare a `profession` variable.
+你应该声明一个 `profession` 变量。
 
 ```js
 assert.match(code, /(?:var|let|const)\s+profession/);
 ```
 
-You should use `let` to declare the `profession` variable.
+你应该使用 `let` 来声明 `profession` 变量。
 
 ```js
 assert.match(code, /let\s+profession/);
 ```
 
-You should assign the string `"teacher"` to the `profession` variable.
+你应该将字符串 `"teacher"` 分配给 `profession` 变量。
 
 ```js
 assert.strictEqual(profession, "teacher");
 ```
 
-You should declare an `age` variable.
+你应该声明一个 `age` 变量。
 
 ```js
 assert.match(code, /(?:var|let|const)\s+age/);
 ```
 
-You should use `let` to declare the `age` variable.
+你应该使用 `let` 来声明 `age` 变量。
 
 ```js
 assert.match(code, /let\s+age/);
 ```
 
-You should not assign a value to the `age` variable.
+你不应该为 `age` 变量赋值。
 
 ```js
 assert.isUndefined(age);
 ```
 
-You should log `age` to the console.
+你应该将 `age` 记录到控制台。
 
 ```js
 assert.match(code, /console\.log\(\s*age\s*\);?/);
 ```
 
-You should log `profession` to the console.
+你应该将 `profession` 记录到控制台。
 
 ```js
 assert.match(code, /console\.log\(\s*profession\s*\);?/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
index 699e88dd661..9aef303d66a 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md
@@ -8,13 +8,13 @@ dashedName: step-24
 
 # --description--
 
-In the last few steps, you learned all about working with arrays. Take a moment to review what you have learned.
+在前面几个步骤中，你学习了有关使用数组的所有知识。 花一点时间复习一下你所学到的知识。
 
-Start by declaring a `cities` variable and initializing it as an array of the strings `"London"`, `"New York"`, and `"Mumbai"`. Then log that variable to the console.
+首先声明一个 `cities` 变量，并将其初始化为字符串 `"London"`、`"New York"` 和 `"Mumbai"` 的数组。 然后将该变量记录到控制台。
 
-After logging, change the last element of `cities` to the string `"Mexico City"`, then log the `cities` variable again.
+记录完成后，将 `cities` 的最后一个元素更改为字符串 `"Mexico City"`，然后再次记录 `cities` 变量。
 
-When done correctly, you should see this output in the console.
+正确完成后，你应该在控制台中看到此输出。
 
 ```js
 [ "London", "New York", "Mumbai" ]
@@ -23,31 +23,31 @@ When done correctly, you should see this output in the console.
 
 # --hints--
 
-You should use `let` to declare a `cities` variable.
+你应该使用 `let` 来声明 `cities` 变量。
 
 ```js
 assert.match(code, /let\s+cities/);
 ```
 
-You should assign an array of the strings `"London"`, `"New York"`, and `"Mumbai"` to the `cities` variable.
+你应该将字符串 `"London"`、`"New York"` 和 `"Mumbai"` 的数组分配给 `cities` 变量。
 
 ```js
 assert.match(code, /let\s+cities\s*=\s*\[\s*("|'|`)London\1\s*,\s*("|'|`)New York\2\s*,\s*("|'|`)Mumbai\3\s*\]/);
 ```
 
-You should use `console.log()` to log the entire `cities` array to the console.
+你应该使用 `console.log()` 将整个 `cities` 数组记录到控制台。
 
 ```js
 assert.match(code, /console\.log\(\s*cities\s*\)/);
 ```
 
-You should update the last element of the `cities` array to the string `"Mexico City"`. Remember that you can access the last element of an array using `array[array.length - 1]`.
+你应该将 `cities` 数组的最后一个元素更新为字符串 `"Mexico City"`。 请记住，你可以使用 `array[array.length - 1]` 访问数组的最后一个元素。
 
 ```js
 assert.deepEqual(cities, ["London", "New York", "Mexico City"]);
 ```
 
-You should have two `console.log(cities)` statements in your code.
+你的代码中应该有两个 `console.log(cities)` 语句。
 
 ```js
 assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log\(\s*cities\s*\)/g), 2);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
index 3c87d3d899c..289a6a62ca9 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732e62eb8b30c249b5c2c.md
@@ -7,13 +7,13 @@ dashedName: step-25
 
 # --description--
 
-Now you are ready to move onto the next set of array lessons.
+现在你已准备好学习下一组数组课程。
 
-Remove all of your code from the previous step.
+删除上一步中的所有代码。
 
 # --hints--
 
-You should remove all references to your `cities` variable.
+你应该删除对 `cities` 变量的所有引用。
 
 ```js
 assert.notMatch(__helpers.removeJSComments(code), /cities/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
index 4c0dc212daa..2e8a460a793 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c93e05093c728abdbe9.md
@@ -7,40 +7,40 @@ dashedName: step-55
 
 # --description--
 
-Before moving on, take a moment to review how functions work.
+在继续之前，请花点时间回顾一下函数的工作原理。
 
-Declare a function named `addTwoNumbers`. This function should take two arguments and return the sum of those two arguments.
+声明一个名为 `addTwoNumbers` 的函数。 该函数应该接受两个参数并返回这两个参数的总和。
 
-Then declare a `sum` variable and assign it the value of calling your `addTwoNumbers` function with `5` and `10` as the arguments. Log the `sum` variable to the console.
+然后声明一个 `sum` 变量并为其分配使用 `5` 和 `10` 作为参数调用 `addTwoNumbers` 函数的值。 将 `sum` 变量记录到控制台。
 
 
 # --hints--
 
-You should have a function called `addTwoNumbers`.
+你应该有一个名为 `addTwoNumbers` 的函数。
 
 ```js
 assert.isFunction(addTwoNumbers);
 ```
 
-Your function should return the sum of the two numbers.
+你的函数应该返回两个数字的总和。
 
 ```js
 assert.strictEqual(addTwoNumbers(2,3), 5);
 ```
 
-You should declare a `sum` variable.
+你应该声明一个 `sum` 变量。
 
 ```js
 assert.isDefined(sum);
 ```
 
-You should assign `sum` the value from calling the `addTwoNumbers` function with `5` and `10` for the arguments.
+你应该将以 `5` 和 `10` 作为参数调用 `addTwoNumbers` 函数得到的值分配给 `sum`。
 
 ```js
 assert.strictEqual(sum, 15);
 ```
 
-You should log your `sum` variable.
+你应该记录你的 `sum` 变量。
 
 ```js
 assert.match(code, /console\.log\(\s*sum\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
index 9e668aa9048..e49b58d2667 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/66643c9a9e0ad1c787f5fe2b.md
@@ -7,23 +7,23 @@ dashedName: step-56
 
 # --description--
 
-With that quick review complete, you should remove your `addTwoNumbers` function, `sum` variable, and log statement.
+完成快速回顾后，你应该删除 `addTwoNumbers` 函数、`sum` 变量和日志语句。
 
 # --hints--
 
-You should not have a `addTwoNumbers` function in your code.
+你的代码中不应该有 `addTwoNumbers` 函数。
 
 ```js
 assert.notMatch(code, /addTwoNumbers/);
 ```
 
-You should not have a `sum` variable in your code.
+你的代码中不应该有 `sum` 变量。
 
 ```js
 assert.notMatch(code, /sum/);
 ```
 
-You should not log the `sum` variable.
+你不应该记录 `sum` 变量。
 
 ```js
 assert.notMatch(code, /console\.log\(\s*sum\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
index 15a2f2f7806..6f521913b3f 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
@@ -7,23 +7,23 @@ dashedName: step-1
 
 # --description--
 
-In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you.
+在这个项目中，你将构建一组足球队卡片，并了解嵌套对象、对象解构、默认参数、事件监听器和 switch 语句。 该项目的所有 HTML 和 CSS 均已为你提供。
 
-Start by accessing the `id` called `"team"` from the HTML document and storing it in a `const` variable called `teamName`.
+首先从 HTML 文档访问名为 `"team"` 的 `id`，并将其存储在名为 `teamName` 的 `const` 变量中。
 
-Remember, you can use the `getElementById` method for this.
+请记住，你可以为此使用 `getElementById` 方法。
 
-_NOTE_: The numbers for the team are organized alphabetically by last name. This differs from conventional numbering where the numbers correspond with what is on the player's jerseys.
+_注意_：球队号码是按照姓氏字母顺序排列的。 这与传统的编号方式不同，传统的编号方式是数字与球员球衣上的号码相对应。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#team` element.
+你应该使用 `document.getElementById()` 方法来获取 `#team` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `teamName` and assign it the `#team` element.
+你应该使用 `const` 声明名为 `teamName` 的变量，并为其分配 `#team` 元素。
 
 ```js
 assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
index 3850a18cd41..2920c4d18e8 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
@@ -7,29 +7,29 @@ dashedName: step-2
 
 # --description--
 
-Next, access the `id` called `"sport"` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `"year"` to a `const` variable called `worldCupYear`.
+接下来，从 HTML 文档中访问名为 `"sport"` 的 `id`，并将其存储在名为 `typeOfSport` 的 `const` 变量中。 在该变量下方，将 `"year"` 的 `id` 分配给名为 `worldCupYear` 的 `const` 变量。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#sport` element.
+你应该使用 `document.getElementById()` 方法来获取 `#sport` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element.
+你应该使用 `const` 声明名为 `typeOfSport` 的变量并为其分配 `#sport` 元素。
 
 ```js
 assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
 ```
 
-You should use the `document.getElementById()` method to get the `#year` element.
+你应该使用 `document.getElementById()` 方法来获取 `#year` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element.
+你应该使用 `const` 声明名为 `worldCupYear` 的变量，并为其分配 `#year` 元素。
 
 ```js
 assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
index ba6e5fb7adf..b4cfdd86469 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
@@ -7,17 +7,17 @@ dashedName: step-4
 
 # --description--
 
-Create one more `const` variable called `playersDropdownList` and assign it the `id` of `"players"` using the `getElementById` method.
+再创建一个名为 `playersDropdownList` 的 `const` 变量，并使用 `getElementById` 方法为其分配 `"players"` 的 `id`。
 
 # --hints--
 
-You should use the `document.getElementById()` method to get the `#players` element.
+你应该使用 `document.getElementById()` 方法来获取 `#players` 元素。
 
 ```js
 assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/);
 ```
 
-You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element.
+你应该使用 `const` 声明名为 `playersDropdownList` 的变量，并为其分配 `#players` 元素。
 
 ```js
 assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
index b42790fc310..19e0e7ac068 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
@@ -7,13 +7,13 @@ dashedName: step-5
 
 # --description--
 
-Now it is time to build out the data structure that will hold all of the information for your football team.
+现在是时候构建保存足球队所有信息的数据结构了。
 
-Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object.
+在刚刚创建的变量下方，创建一个名为 `myFavoriteFootballTeam` 的新 `const` 变量，并为其分配一个空对象。
 
 # --hints--
 
-You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object.
+你应该使用 `const` 来声明名为 `myFavoriteFootballTeam` 的变量并为其分配一个空对象。
 
 ```js
 assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
index 50ece4b0643..d97df7393cb 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
@@ -7,23 +7,23 @@ dashedName: step-8
 
 # --description--
 
-Below the `sport` property, add a new property with a key named `year` and a number value of `1986`.
+在 `sport` 属性下方，添加一个新属性，其键名为 `year`，数字值为 `1986`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `year` property.
+你的 `myFavoriteFootballTeam` 对象应该具有 `year` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'year');
 ```
 
-Your `year` property should be a number.
+你的 `year` 属性应该是一个数字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.year);
 ```
 
-Your `year` property should be set to `1986`.
+你的 `year` 属性应设置为 `1986`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.year, 1986);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
index bb9999f0a31..a60d8bc4a08 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
@@ -7,23 +7,23 @@ dashedName: step-9
 
 # --description--
 
-Below the `year` property, add a new property with a key named `isWorldCupWinner` and a boolean value set to `true`.
+在 `year` 属性下方，添加一个新属性，其键名为 `isWorldCupWinner`，布尔值设置为 `true`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
+你的 `myFavoriteFootballTeam` 对象应该具有 `isWorldCupWinner` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
 ```
 
-Your `isWorldCupWinner` property should be a boolean.
+你的 `isWorldCupWinner` 属性应该是布尔值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
 ```
 
-Your `isWorldCupWinner` property should be set to `true`.
+你的 `isWorldCupWinner` 属性应设置为 `true`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
index 07855efed9e..5726a1f644e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
@@ -7,47 +7,47 @@ dashedName: step-10
 
 # --description--
 
-Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `"Carlos Bilardo"`. Below that property, add another key called `matches` with a number value of `7`.
+在 `isWorldCupWinner` 属性下方，添加一个名为 `headCoach` 的新键，其值为空对象。 在该对象内部，添加一个属性，其键为 `coachName`，字符串值为 `"Carlos Bilardo"`。 在该属性下方，添加另一个名为 `matches` 的键，其数字值为 `7`。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `headCoach` property.
+你的 `myFavoriteFootballTeam` 对象应该具有 `headCoach` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'headCoach');
 ```
 
-Your `headCoach` value should be an object.
+你的 `headCoach` 值应该是一个对象。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.headCoach)
 ```
 
-Your `headCoach` object should have a `coachName` property.
+你的 `headCoach` 对象应该具有 `coachName` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.headCoach, 'coachName');
 ```
 
-Your `coachName` property should be set to `"Carlos Bilardo"`.
+你的 `coachName` 属性应设置为 `"Carlos Bilardo"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo');
 ```
 
-Your `headCoach` object should have a `matches` property.
+你的 `headCoach` 对象应该具有 `matches` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.headCoach, 'matches');
 ```
 
-Your `matches` property should be a number.
+你的 `matches` 属性应该是一个数字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.headCoach.matches);
 ```
 
-Your `matches` property should be set to `7`.
+你的 `matches` 属性应设置为 `7`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.headCoach.matches, 7);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
index bf6fd3b5340..42615fbd0e1 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
@@ -7,23 +7,23 @@ dashedName: step-11
 
 # --description--
 
-Below the `headCoach` property, create a new property with a key named `players` with the value of an empty array.
+在 `headCoach` 属性下方，创建一个键为 `players` 的新属性，其值为一个空数组。
 
 # --hints--
 
-Your `myFavoriteFootballTeam` object should have a `players` property.
+你的 `myFavoriteFootballTeam` 对象应该具有 `players` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam, 'players');
 ```
 
-Your `players` value should be an array.
+你的 `players` 值应该是一个数组。
 
 ```js
 assert.isArray(myFavoriteFootballTeam.players)
 ```
 
-Your `players` array should be empty.
+你的 `players` 数组应该是空的。
 
 ```js
 assert.deepEqual(myFavoriteFootballTeam.players, [])
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
index 4679dd08047..351cba4cf31 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
@@ -7,7 +7,7 @@ dashedName: step-12
 
 # --description--
 
-Inside that `players` array, create a new object with the following properties:
+在 `players` 数组内，创建一个具有以下属性的新对象：
 
 ```md
 name: "Sergio Almirón"
@@ -17,83 +17,83 @@ isCaptain: false
 nickname: null
 ```
 
-_NOTE_: The numbers for the team are organized alphabetically by last name. This differs from conventional numbering where the numbers correspond with what is on the player's jerseys.
+_注意_：球队号码是按照姓氏字母顺序排列的。 这与传统的编号方式不同，传统的编号方式是数字与球员球衣上的号码相对应。
 
 # --hints--
 
-Your `myFavoriteFootballTeam.players` array should have the value of an object.
+你的 `myFavoriteFootballTeam.players` 数组应该具有一个对象的值。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.players[0])
 ```
 
-Your new object should have a `name` property.
+你的新对象应该有一个 `name` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'name');
 ```
 
-Your `name` property should be set to `"Sergio Almirón"`.
+你的 `name` 属性应设置为 `"Sergio Almirón"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón');
 ```
 
-Your new object should have a `position` property.
+你的新对象应该具有 `position` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'position');
 ```
 
-Your `position` property should be set to `"forward"`.
+你的 `position` 属性应设置为 `"forward"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward');
 ```
 
-Your new object should have a `number` property.
+你的新对象应该具有 `number` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'number');
 ```
 
-Your `number` property should be a number.
+你的 `number` 属性应该是一个数字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.players[0]?.number);
 ```
 
-Your `number` property should be set to `1`.
+你的 `number` 属性应设置为 `1`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.number, 1);
 ```
 
-Your new object should have a `isCaptain` property.
+你的新对象应该具有 `isCaptain` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'isCaptain');
 ```
 
-Your `isCaptain` property should be a boolean.
+你的 `isCaptain` 属性应该是布尔值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain);
 ```
 
-Your `isCaptain` property should be set to `false`.
+你的 `isCaptain` 属性应设置为 `false`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false);
 ```
 
-Your new object should have a `nickname` property.
+你的新对象应该有一个 `nickname` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[0], 'nickname');
 ```
 
-Your `nickname` property should be set to `null`.
+你的 `nickname` 属性应设置为 `null`。
 
 ```js
 assert.isNull(myFavoriteFootballTeam.players[0]?.nickname);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
index 86c731c8e15..190e232551b 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-Below that object, create a new object with the following properties:
+在该对象下方，创建一个具有以下属性的新对象：
 
 ```md          
 name: "Sergio Batista"
@@ -19,86 +19,86 @@ nickname: null
 
 # --hints--
 
-Your `myFavoriteFootballTeam.players` array should have two values.
+你的 `myFavoriteFootballTeam.players` 数组应该有两个值。
 
 ```js
 // Have to assert at least, because we pre-populate data in the next step.
 assert.isAtLeast(myFavoriteFootballTeam.players.length, 2);
 ```
 
-Your `myFavoriteFootballTeam.players` array should have an object as the second value.
+你的 `myFavoriteFootballTeam.players` 数组应该有一个对象作为第二个值。
 
 ```js
 assert.isObject(myFavoriteFootballTeam.players[1])
 ```
 
-Your new object should have a `name` property.
+你的新对象应该有一个 `name` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'name');
 ```
 
-Your `name` property should be set to `"Sergio Batista"`.
+你的 `name` 属性应设置为 `"Sergio Batista"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista');
 ```
 
-Your new object should have a `position` property.
+你的新对象应该具有 `position` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'position');
 ```
 
-Your `position` property should be set to `"midfielder"`.
+你的 `position` 属性应设置为 `"midfielder"`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder');
 ```
 
-Your new object should have a `number` property.
+你的新对象应该具有 `number` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'number');
 ```
 
-Your `number` property should be a number.
+你的 `number` 属性应该是一个数字。
 
 ```js
 assert.isNumber(myFavoriteFootballTeam.players[1]?.number);
 ```
 
-Your `number` property should be set to `2`.
+你的 `number` 属性应设置为 `2`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.number, 2);
 ```
 
-Your new object should have a `isCaptain` property.
+你的新对象应该具有 `isCaptain` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'isCaptain');
 ```
 
-Your `isCaptain` property should be a boolean.
+你的 `isCaptain` 属性应该是布尔值。
 
 ```js
 assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain);
 ```
 
-Your `isCaptain` property should be set to `false`.
+你的 `isCaptain` 属性应设置为 `false`。
 
 ```js
 assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false);
 ```
 
-Your new object should have a `nickname` property.
+你的新对象应该有一个 `nickname` 属性。
 
 ```js
 assert.property(myFavoriteFootballTeam.players[1], 'nickname');
 ```
 
-Your `nickname` property should be set to `null`.
+你的 `nickname` 属性应设置为 `null`。
 
 ```js
 assert.isNull(myFavoriteFootballTeam.players[1]?.nickname);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
index d9520c64e56..435dc2cc102 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
@@ -1,23 +1,23 @@
 ---
 id: 63e0334b7a24bd3c96aca4de
-title: Step 16
+title: 步骤 16
 challengeType: 0
 dashedName: step-16
 ---
 
 # --description--
 
-Below the `sport` variable, access the key called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`.
+在 `sport` 变量下方，从 `myFavoriteFootballTeam` 对象访问名为 `team` 的键，并将其分配给名为 `team` 的新 `const` 变量。
 
 # --hints--
 
-You should use `const` to declare a `team` variable.
+你应该使用 `const` 来声明 `team` 变量。
 
 ```js
 assert.match(code, /const\s+team\s*=/);
 ```
 
-You should assign the value of the `team` key from the `myFavoriteFootballTeam` object to the `team` variable.
+你应该将 `myFavoriteFootballTeam` 对象中的 `team` 键的值分配给 `team` 变量。
 
 ```js
 assert.equal(team, myFavoriteFootballTeam.team);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
index 289713fd548..9a8af757498 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
@@ -1,15 +1,15 @@
 ---
 id: 63e036373fc9173d284e165a
-title: Step 17
+title: 步骤 17
 challengeType: 0
 dashedName: step-17
 ---
 
 # --description--
 
-In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal.
+在前两个步骤中，你一直使用点符号访问 `myFavoriteFootballTeam` 对象的属性，并将它们分配给新的 `const` 变量。 但在 JavaScript 中，有一种更简单的方法来实现相同的目标。
 
-The <dfn>object destructuring</dfn> syntax allows you to unpack values from arrays and objects:
+<dfn>对象解构</dfn>语法允许你从数组和对象中解包值：
 
 ```js
 const developerObj = {
@@ -21,11 +21,11 @@ const developerObj = {
 const { name, isDeveloper } = developerObj;
 ```
 
-Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code.
+使用新的解构语法重写下面两行代码。 你的答案应该是一行代码。
 
 # --hints--
 
-Use object destructuring to access the `sport` and `team` values.
+使用对象解构来访问 `sport` 和 `team` 值。
 
 ```js
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
index 2a8ea3b0d0b..b38e1384fcd 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
@@ -1,17 +1,17 @@
 ---
 id: 63e03b86008bbb3e1c3de846
-title: Step 18
+title: 步骤 18
 challengeType: 0
 dashedName: step-18
 ---
 
 # --description--
 
-Next, add the `year` and `players` to your destructuring assignment.
+接下来，将 `year` 和 `players` 添加到你的解构赋值中。
 
 # --hints--
 
-You should add the `year` and `players` values to your destructuring assignment.
+你应该将 `year` 和 `players` 值添加到你的解构赋值中。
 
 ```js
 assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
index ed536a4b70e..eef4a97d0c2 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
@@ -1,21 +1,21 @@
 ---
 id: 63e050bf935ac341b88326d6
-title: Step 20
+title: 步骤 20
 challengeType: 0
 dashedName: step-20
 ---
 
 # --description--
 
-Now you need to start displaying the team's information on the screen.
+现在你需要开始在屏幕上显示球队的信息。
 
-Below your destructuring assignments, assign the `sport` variable to `typeOfSport.textContent`.
+在解构分配下方，将 `sport` 变量分配给 `typeOfSport.textContent`。
 
-Once you complete that task, you should see the result in the preview window.
+完成该任务后，你应该在预览窗口中看到结果。
 
 # --hints--
 
-You should assign the `sport` variable to `typeOfSport.textContent`.
+你应该将 `sport` 变量分配给 `typeOfSport.textContent`。
 
 ```js
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
index 95afe938baf..e4d6a230edf 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
@@ -18,17 +18,17 @@ console.log(greeting("John")); // Hello John
 console.log(greeting()); // Hello Anonymous
 ```
 
-Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. Remember that you destructured the `players` variable from the `myFavoriteFootballTeam` object on line `175`.
+向你的 `setPlayerCards` 函数添加一个名为 `arr` 的新参数，并为其分配一个默认值 `players`。 请记住，你在 `175` 行从 `myFavoriteFootballTeam` 对象中解构了 `players` 变量。
 
 # --hints--
 
-Your `setPlayerCards` function should take an `arr` parameter.
+你的 `setPlayerCards` 函数应该采用 `arr` 参数。
 
 ```js
 assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/);
 ```
 
-Your `arr` parameter should have a default value of `players`.
+你的 `arr` 参数应该有一个默认值 `players`。
 
 ```js
 assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
index 90cde5e529e..32f69bfb1e5 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
@@ -1,39 +1,39 @@
 ---
 id: 63e949b8327aa2aca2ca8eac
-title: Step 25
+title: 步骤 25
 challengeType: 0
 dashedName: step-25
 ---
 
 # --description--
 
-The next step is to create a new array that will be responsible for adding the player card information to the page.
+下一步是创建一个新的数组，负责将球员卡信息添加到页面。
 
-Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`.
+在 `setPlayerCards` 函数中，首先将 `map` 方法添加到 `arr`，该方法将接受一个空的回调函数。 然后，使用加法赋值 `+=` 运算符将新数组分配给 `playerCards.innerHTML`。
 
-Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element.
+请记住，`innerHTML` 属性获取（或在本例中设置）`playerCards` 元素的 HTML 标记。
 
 # --hints--
 
-You should call the `.map()` method on your `arr` parameter.
+你应该在 `arr` 参数上调用 `.map()` 方法。
 
 ```js
 assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/);
 ```
 
-Your `.map()` method should take an empty callback function.
+你的 `.map()` 方法应该采用一个空的回调函数。
 
 ```js
 assert.match(code, /arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
 ```
 
-You should use the `+=` operator on `playerCards.innerHTML`.
+你应该在 `playerCards.innerHTML` 上使用 `+=` 运算符。
 
 ```js
 assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/);
 ```
 
-You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator.
+你应该使用 `+=` 运算符将 `arr.map()` 分配给 `playerCards.innerHTML`。
 
 ```js
 assert.match(code, /playerCards\.innerHTML\s*\+=\s*arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
index 3912e0e6228..9b5779fbc55 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
@@ -1,13 +1,13 @@
 ---
 id: 63e95a45dce95baf41dd4f78
-title: Step 28
+title: 步骤 28
 challengeType: 0
 dashedName: step-28
 ---
 
 # --description--
 
-Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter:
+在 `div` 内，添加一个包含 `name` 参数的 `h2` 元素。 由于你正在使用模板字面量，因此需要对 `name` 参数使用嵌入表达式：
 
 ```js
 ${expression goes here}
@@ -15,13 +15,13 @@ ${expression goes here}
 
 # --hints--
 
-You should add an `h2` element with the `name` parameter.
+你应该添加一个带有 `name` 参数的 `h2` 元素。
 
 ```js
 assert.match(code, /\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*/)
 ```
 
-Your `h2` should be nested in your `div`.
+你的 `h2` 应该嵌套在你的 `div` 中。
 
 ```js
 assert.match(code, /`\s*<div\s+class\s*=\s*"\s*player-card\s*"\s*>\s*<h2\s*>\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
index 0a1a3b442c5..ae84d588cbf 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
@@ -1,23 +1,23 @@
 ---
 id: 63e96938d2a347b2734a1587
-title: Step 31
+title: 步骤 31
 challengeType: 0
 dashedName: step-31
 ---
 
 # --description--
 
-Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter.
+在段落元素下方，添加另一个段落元素，其中包含文本 `Number:` 和包含 `number` 参数的嵌入表达式。
 
 # --hints--
 
-You should add a new paragraph element with the text `Number:` followed by the `number` variable.
+你应该添加一个新的段落元素，其中包含文本 `Number:`，后跟 `number` 变量。
 
 ```js
 assert.match(code, /\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
 ```
 
-Your new `p` element should come after your existing `p` element.
+你的新 `p` 元素应位于现有的 `p` 元素之后。
 
 ```js
 assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
index ecdc7fcd3bc..1a1dd2b616e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md
@@ -1,23 +1,23 @@
 ---
 id: 63e96eb94c97b6b31ee50f63
-title: Step 32
+title: 步骤 32
 challengeType: 0
 dashedName: step-32
 ---
 
 # --description--
 
-Below your existing paragraph elements, add another paragraph element with the text `Nickname:`.
+在现有的段落元素下方，添加另一个带有文本 `Nickname:` 的段落元素。
 
 # --hints--
 
-You should add a new paragraph element with the text `Nickname:`.
+你应该添加一个带有文本 `Nickname:` 的新段落元素。
 
 ```js
 assert.match(code, /\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
 ```
 
-Your new `p` element should come after the `h2` element.
+你的新 `p` 元素应位于 `h2` 元素之后。
 
 ```js
 assert.match(code, /<\/h2>\s*<p\s*>\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*<p\s*>\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*<p\s*>\s*Nickname:\s*<\/p>\s*/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
index cf2a41f139f..97864648880 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md
@@ -1,26 +1,26 @@
 ---
 id: 63e9737f686c76b4078a60f4
-title: Step 34
+title: 步骤 34
 challengeType: 0
 dashedName: step-34
 ---
 
 # --description--
 
-The `.map()` method will return a new array of `player-card` items separated by commas.
+`.map()` 方法将返回一个由逗号分隔的 `player-card` 项组成的新数组。
 
-To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method.
+要删除每个 `player-card` 之间的逗号以使其不显示在屏幕上，请将 `.join()` 方法链接到 `.map()` 方法。 传递一个空字符串作为 `.join()` 方法的参数。
 
 
 # --hints--
 
-You should chain the `.join()` method to the `.map()` method.
+你应该将 `.join()` 方法链接到 `.map()` 方法。
 
 ```js
 assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s);
 ```
 
-You should pass an empty string to the `.join()` method.
+你应该将一个空字符串传递给 `.join()` 方法。
 
 ```js
 assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
index 488cdddbe15..a975b272128 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md
@@ -1,31 +1,31 @@
 ---
 id: 63f28972973504e7bb58b0b3
-title: Step 35
+title: 步骤 35
 challengeType: 0
 dashedName: step-35
 ---
 
 # --description--
 
-The next step is to create a function that will detect when a user makes a selection from the `playersDropdownList`.
+下一步是创建一个函数，用于检测用户何时从 `playersDropdownList` 中做出选择。
 
-Use the `.addEventListener()` method on `playersDropdownList`. Inside the event listener, pass in a `"change"` event type and an empty callback function.
+在 `playersDropdownList` 上使用 `.addEventListener()` 方法。 在事件监听器内部，传入一个 `"change"` 事件类型和一个空的回调函数。
 
 # --hints--
 
-You should call the `.addEventListener()` method on the `playersDropdownList` variable.
+你应该在 `playersDropdownList` 变量上调用 `.addEventListener()` 方法。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(/);
 ```
 
-Your event listener should listen for the `"change"` event.
+你的事件监听器应该监听 `"change"` 事件。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/);
 ```
 
-Your event listener should have an empty callback function.
+你的事件监听器应该有一个空的回调函数。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
index ec7cc6c5b4f..995da4ee38d 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md
@@ -1,19 +1,19 @@
 ---
 id: 63f28ef082d771e8bf71f94a
-title: Step 36
+title: 步骤 36
 challengeType: 0
 dashedName: step-36
 ---
 
 # --description--
 
-For the callback function, pass in `e` as a parameter.
+对于回调函数，传入 `e` 作为参数。
 
-`e` represents an object which contains the information for that event.
+`e` 表示包含该事件信息的对象。
 
 # --hints--
 
-You should pass in `e` as a parameter to your callback function.
+你应该将 `e` 作为参数传递给回调函数。
 
 ```js
 assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*(\(\s*e\s*\)|e)\s*=>\s*\{\s*\}\s*\)/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
index e0dee430ad2..a812fc928c5 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md
@@ -1,33 +1,33 @@
 ---
 id: 63f29804e3ec00ea6fab1ec4
-title: Step 38
+title: 步骤 38
 challengeType: 0
 dashedName: step-38
 ---
 
 # --description--
 
-Remove the `console.log` statement you created in the previous step.
+删除你在上一步中创建的 `console.log` 语句。
 
-The next step would be to reset the content for the `playerCards` element.
+下一步是重置 `playerCards` 元素的内容。
 
-Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string.
+在回调函数内部，访问 `playerCards` 元素的 `innerHTML` 属性并为其分配一个空字符串值。
 
 # --hints--
 
-You should not have the `console.log` statement in your code.
+你的代码中不应该有 `console.log` 语句。
 
 ```js
 assert.notMatch(code, /\s*console\.log\(\s*e\.target\.value\s*\)/);
 ```
 
-You should access the `innerHTML` property of the `playerCards` element.
+你应该访问 `playerCards` 元素的 `innerHTML` 属性。
 
 ```js
 assert.match(code, /playerCards\.innerHTML\s*=/);
 ```
 
-You should set the `innerHTML` property to an empty string.
+你应该将 `innerHTML` 属性设置为空字符串。
 
 ```js
 assert.match(code, /\s*playerCards\.innerHTML\s*=\s*('|"|`)\1/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
index b30ebb4893a..f667464a980 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md
@@ -1,31 +1,31 @@
 ---
 id: 63f29ce62aea65eb041758c8
-title: Step 39
+title: 步骤 39
 challengeType: 0
 dashedName: step-39
 ---
 
 # --description--
 
-The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions.
+下一步将添加一个 `switch` 语句，该语句将检查用户从玩家下拉菜单中的选择，并根据玩家的位置过滤掉卡片。
 
-Add a `switch` statement and use `e.target.value` for the expression.
+添加 `switch` 语句并使用 `e.target.value` 作为表达式。
 
 # --hints--
 
-You should use a `switch` statement.
+你应该使用 `switch` 语句。
 
 ```js
 assert.match(code, /switch/);
 ```
 
-Your `switch` statement should use `e.target.value` for the expression.
+你的 `switch` 语句应该使用 `e.target.value` 作为表达式。
 
 ```js
 assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/);
 ```
 
-Your `switch` statement should be empty.
+你的 `switch` 语句应该是空的。
 
 ```js
 assert.match(code, /\s*switch\s*\(\s*e\.target\.value\s*\)\s*{\s*}/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
index 537d02a7c7d..2f98f4eae14 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md
@@ -1,19 +1,19 @@
 ---
 id: 63f2a0a860790eebe61bf908
-title: Step 40
+title: 步骤 40
 challengeType: 0
 dashedName: step-40
 ---
 
 # --description--
 
-If the user selects `Nicknames` from the dropdown menu you will want to filter out player cards that have a nickname.
+如果用户从下拉菜单中选择 `Nicknames`，你将需要过滤掉带有昵称的球员卡。
 
-Start by adding a `case` clause for `"nickname"` inside your `switch` statement.
+首先在 `switch` 语句中为 `"nickname"` 添加一个 `case` 子句。
 
 # --hints--
 
-You should add a new `case` clause for `"nickname"` inside your `switch` statement.
+你应该在 `switch` 语句中为 `"nickname"` 添加一个新的 `case` 子句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
index 25b1c3f15a5..69bfd54e956 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2a5f09a785aed155c0a56
-title: Step 44
+title: 步骤 44
 challengeType: 0
 dashedName: step-44
 ---
 
 # --description--
 
-Add a new `case` for `"midfielder"` that checks if `player.position` equals `"midfielder"` following the same pattern from the previous step.
+为 `"midfielder"` 添加一个新的 `case`，按照与上一步相同的模式检查 `player.position` 是否等于 `"midfielder"`。
 
 # --hints--
 
-You should add a new `case` for `"midfielder"` inside your `switch` statement.
+你应该在 `switch` 语句中为 `"midfielder"` 添加一个新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/)
 ```
 
-In your `"midfielder"` `case`, you should call the `setPlayerCards` function.
+在你的 `"midfielder"` `case` 中，你应该调用 `setPlayerCards` 函数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你应该将 `players.filter()` 传递给你的 `setPlayerCards` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你应该将箭头回调函数传递给你的 `players.filter()` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回调应该采用 `player` 参数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"midfielder"`.
+你的 `filter()` 回调应该隐式返回检查 `player.position` 是否为 `"midfielder"` 的结果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)midfielder\2|('|"|`)midfielder\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 调用下方添加 `break` 语句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)midfielder\2|('|"|`)midfielder\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
index 0a949a6ce47..0aa1a29ea01 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2a8e14fb388edd3242527
-title: Step 45
+title: 步骤 45
 challengeType: 0
 dashedName: step-45
 ---
 
 # --description--
 
-Add a new `case` for `"defender"` that checks if `player.position` equals `"defender"` following the same pattern as the previous step.
+为 `"defender"` 添加一个新的 `case`，按照与上一步相同的模式检查 `player.position` 是否等于 `"defender"`。
 
 # --hints--
 
-You should add a new `case` for `"defender"` inside your `switch` statement.
+你应该在 `switch` 语句内为 `"defender"` 添加一个新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/)
 ```
 
-In your `"defender"` `case`, you should call the `setPlayerCards` function.
+在你的 `"defender"` `case` 中，你应该调用 `setPlayerCards` 函数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你应该将 `players.filter()` 传递给你的 `setPlayerCards` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你应该将箭头回调函数传递给你的 `players.filter()` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回调应该采用 `player` 参数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"defender"`.
+你的 `filter()` 回调应该隐式返回检查 `player.position` 是否为 `"defender"` 的结果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)defender\2|('|"|`)defender\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 调用下方添加 `break` 语句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)defender\2|('|"|`)defender\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
index e8bb1e54c5d..cf1bab59fc3 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md
@@ -1,53 +1,53 @@
 ---
 id: 63f2aa36fcdc63ee4e18fc37
-title: Step 46
+title: 步骤 46
 challengeType: 0
 dashedName: step-46
 ---
 
 # --description--
 
-Add a new `case` for `"goalkeeper"` that checks if `player.position` equals `"goalkeeper"` following the same pattern as the previous step.
+为 `"goalkeeper"` 添加一个新的 `case`，按照与上一步相同的模式检查 `player.position` 是否等于 `"goalkeeper"`。
 
 # --hints--
 
-You should add a new `case` for `"goalkeeper"` inside your `switch` statement.
+你应该在 `switch` 语句内为 `"goalkeeper"` 添加一个新的 `case`。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/)
 ```
 
-In your `"goalkeeper"` `case`, you should call the `setPlayerCards` function.
+在你的 `"goalkeeper"` `case` 中，你应该调用 `setPlayerCards` 函数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/)
 ```
 
-You should pass `players.filter()` to your `setPlayerCards` call.
+你应该将 `players.filter()` 传递给你的 `setPlayerCards` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/)
 ```
 
-You should pass an arrow callback function to your `players.filter()` call.
+你应该将箭头回调函数传递给你的 `players.filter()` 调用。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(.*\)|[^\s()]+)\s*=>/);
 ```
 
-Your `filter()` callback should take a `player` parameter.
+你的 `filter()` 回调应该采用 `player` 参数。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
 ```
 
-Your `filter()` callback should implicitly return the result of checking if `player.position` is `"goalkeeper"`.
+你的 `filter()` 回调应隐式返回检查 `player.position` 是否为 `"goalkeeper"` 的结果。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)goalkeeper\2|('|"|`)goalkeeper\3\s*===?\s*player\.position)\s*\)/)
 ```
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 调用下方添加 `break` 语句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)goalkeeper\2|('|"|`)goalkeeper\3\s*===?\s*player\.position)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
index 90517bafb28..66c66f0da6a 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md
@@ -1,19 +1,19 @@
 ---
 id: 641fcfd468185384ac218b7d
-title: Step 42
+title: 步骤 42
 challengeType: 0
 dashedName: step-42
 ---
 
 # --description--
 
-Before you can move onto the next `case`, you will need to add a `break` statement.
+在转到下一个 `case` 之前，你需要添加 `break` 语句。
 
-Below your `setPlayerCards` call, add a `break` statement.
+在 `setPlayerCards` 调用下方，添加 `break` 语句。
 
 # --hints--
 
-You will need to add a `break` statement below your `setPlayerCards` call.
+你需要在 `setPlayerCards` 调用下方添加 `break` 语句。
 
 ```js
 assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>\s*(player\.nickname\s*!==?\s*null|null\s*!==?\s*player\.nickname)\s*\)\s*\)\s*;?\s*break/)
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/chinese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 4e7044c92ee..34f65717021 100644
--- a/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/espanol/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index c3a10a0e30d..e90a8586811 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 8f74fbfa786..127571b913f 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index f1a5600c2e3..ab6fd6a3786 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 Dentro del segundo elemento `section`, agrega dos elementos `div` con la clase `question-block`.
 
-Luego, dentro de cada elemento `div.question-block`, agrega un elemento `p` con un texto de números incrementales, empezando en `1`, y un elemento `fieldset` con la clase `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ Debes dar al segundo elemento `div` nuevo una clase `question-block`.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-Debes anidar un elemento `p` dentro de cada elemento `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-Debes dar al primer elemento `p` un texto de `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-Debes dar al segundo elemento `p` un texto de `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 Debes anidar un elemento `fieldset` dentro de cada elemento `div.question-block`.
@@ -55,16 +55,16 @@ Debes anidar un elemento `fieldset` dentro de cada elemento `div.question-block`
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-Debes colocar el primer elemento `fieldset` después del primer elemento `p`.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-Debes colocar el segundo elemento `fieldset` después del segundo elemento `p`.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 Debes dar al primer elemento `fieldset` una clase `question`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index b2509ebadd1..3a6e8436d0f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 6ea2c245b02..474a01f38f9 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index fb31b880bd3..8d0c9e7982e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index aa28981a3da..184ef376d7e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index cd12075035c..ce750f91a42 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 79ef8293c2e..1fc48e9a126 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index 6e1ab6e7b66..22fe1dba724 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index a2d24c5e1ed..f85acd6766c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 34be2088eed..0a6cb97ad23 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index f313e04f60c..fb5d7533360 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 2bd7e0efed9..4ab5f479b69 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index ba9e3156a8a..e76a5d35ec6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index b8f0fef9ed1..df7523302bf 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 79ec9ad7f33..0ba61e43c22 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index cbe1bd2566b..8695ab8d2ed 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index 9b8472fdb45..d9be91f59ab 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index f55e71d4621..afbefc09b84 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 1c60c857591..60c4dfcbb56 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index bab04c97a0a..6a39c861e31 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index d2087ffcb94..032dc14a8eb 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 82f23f9961c..8057792e65b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 5959db48560..96a52fb9e8a 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index dd9b44ac406..e3508d590c6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 8750690c036..dbb3ab9e9eb 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index b110735c162..9f53015f7a7 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 1c18e1cf612..a09963291b1 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index bff18e022ae..e0068dda13d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index f2db2c953c8..72dce57178d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 685e4d95e96..b6649fc83bd 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 75bfe2e66fe..f67631dcdde 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index ee5d787c46d..41a34e487d3 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index e665ba059ee..a47229384c2 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index cd4d8bf08df..af7f17d3520 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 2b730230de4..57bbf95992f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 89ce7e79376..cb8772373ec 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index fb3a6fda91f..ad2ff798dde 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index c4c3285cfae..c4bffb7769f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 38c0f5e658f..e2a1eca1332 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index ad698d1d345..e662d276bb0 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 95abd609dc6..ed2141bad3e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 31d02d80cba..6c4696a0c64 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index b3befb6caf9..02e106fc00c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index f2b9e803d5d..e59e762fe98 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 El elemento `title` es uno de los varios elementos que proporcionan información adicional no visible en la página web, pero que es útil para los motores de búsqueda o en cómo es mostrada la página.
 
-Dentro del elemento `head`, anida un elemento `meta` con un atributo `charset` con el valor `utf-8` para decirle al navegador cómo se codificarán los caracteres para la página. Ten en cuenta que los elementos `meta` se cierran automáticamente.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 Debes tener una etiqueta `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Tu etiqueta `meta` debe tener un atributo `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Tu atributo `charset` debe tener el valor `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 8fdce01599d..5b422c32838 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Tu código debe tener un elemento `link`.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 No debes modificar el elemento `head` existente. Asegúrate de no haber eliminado la etiqueta de cierre.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-Debes tener un elemento `link` de auto-cierre.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 Tu elemento `link` debe estar dentro del elemento `head`.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 Tu elemento `link` debe tener un atributo `rel` con el valor `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 Tu elemento `link` debe tener un atributo `href` con el valor `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index 6aa6cd51227..f07a2526858 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 Puedes usar un elemento `hr` para mostrar una línea divisora entre secciones con diferente contenido.
 
-Primero, añade un elemento `hr` entre el elemento `p` con clase `established` y el primer elemento `section`. Ten en cuenta que los elementos `hr` son de auto-cierre.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-Debes añadir un elemento `hr`. Los elementos `hr` son de auto-cierre.
+Debes añadir un elemento `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-No debes cambiar el elemento `p` con clase `established` existente.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-No debes modificar el elemento `main` existente.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-El elemento `hr` debe estar entre el elemento `p` y el elemento `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 86151d7f21d..57054073cb0 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ Debajo del título `Coffee`, añade una imagen usando la url `https://cdn.freeco
 
 # --hints--
 
-Debes tener una etiqueta `<img>`. Recuerda que los elementos `img` son de auto-cierre.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-Tu elemento `img` debe tener un atributo `src` con el valor `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-Tu elemento `img` debe tener un atributo `alt` con el valor `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index c6b6fee82f5..30099b8a279 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-Las transiciones de gradiente a menudo cambian gradualmente de un color a otro. Puede hacer que el cambio sea una línea sólida como esta:
+Las transiciones de gradiente a menudo cambian gradualmente de un color a otro. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index e910f746701..71c639fb79f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Puedes añadir imágenes a tu sitio web utilizando el elemento `img`. Los elementos `img` tienen una etiqueta de apertura sin una etiqueta de cierre. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+Puedes añadir imágenes a tu sitio web utilizando el elemento `img`. Los elementos `img` tienen una etiqueta de apertura sin una etiqueta de cierre. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 Añade un elemento `img` debajo del elemento `p`. Por ahora no se mostrará ninguna imagen en el navegador.
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index b71c9d3b2c4..77db64d2b51 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 43de4048cc6..ad17a12b933 100644
--- a/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/italian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index 78b9f6c51f1..1e629e9e282 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 37fb4314e37..46947ba1ca0 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index ea14f54c518..c7239c96f6e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 Dentro il secondo elemento `section`, aggiungi due elementi `div` con la classe di `question-block`.
 
-Poi, dentro ogni elemento `div.question-block`, aggiungi un elemento `p` con un testo contenente numeri crescenti, iniziando da `1`, e un elemento `fieldset` con la classe di `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ Dovresti dare al secondo elemento `div` la classe `question-block`.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-Dovresti annidare un elemento `p` dentro ogni elemento `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-Dovresti dare al primo elemento `p` il testo `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-Dovresti dare al secondo elemento `p` il testo `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 Dovresti annidare un elemento `fieldset` dentro ogni elemento `div.question-block`.
@@ -55,16 +55,16 @@ Dovresti annidare un elemento `fieldset` dentro ogni elemento `div.question-bloc
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-Dovresti inserire il primo elemento `fieldset` dopo il primo elemento `p`.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-Dovresti inserire il secondo elemento `fieldset` dopo il secondo elemento `p`.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 Dovresti dare al primo elemento `fieldset` la classe `question`.
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index e09de0124de..f1cbf925e43 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 0b5d87feb08..90bec747858 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index fa96f48a361..3ac5a7fda01 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 01739e328e4..4663e82dda3 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index fca10bd7c05..1b7a9fd854c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 80685fb2892..90633e5ee63 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index 1d09622b036..4865200a4ec 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index dfeb6307eb0..60b0e85dc46 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 142ef0b6964..1565d3a9b4d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index c11951a678a..31b69dbf1ad 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 85e5eda153f..bbcfe7e9d8a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 09ea4f373be..c29080dc317 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index cbb0cd099c8..87a4f9c895f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 2e0d169ebb9..9ed45af91e9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 583f2d0af3a..31c86e11375 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index e23b2a2c2ce..082b3a997da 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 28deebb83af..97daa96d754 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index b46044277a8..6d4072c718a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index 6fee42cddcb..cf6437f467b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index eafaeaf7894..cfa8a106e9f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 3be81347c35..71139bf5637 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 7303e2048a5..c277f5afc91 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index dc6395cc283..162b071c6b1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 633184438de..8d7ac030ee9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 09e547eaed0..2987d4090e0 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index a2e5d74355b..208b9b9ebca 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index 0f3291c4831..fc2c4a9ae88 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 6edde9e3537..d0015f78aa5 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index f934800fcbd..7704ce8c06b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 37dbef9557d..c1852d99bf6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index 3c01766bcc0..f12851adf3c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index bdf5036a6e0..5c5cca4777c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index cb914f003bd..a738da93bbb 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 9f0dc2651bd..8e13cc0f6b0 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 7edaf819ac7..b08b4e057e1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index c0a2aa902ae..b79a918af29 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 46d54b107dc..48f2a408455 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 3c4257e888f..dc420ef4fc5 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index f17431f12bb..e5ba725111e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 2f99b0579da..2d4f105bda3 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 00adbce313b..915a4338899 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 490ac469448..c003292a15c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 2180bc1ca14..c5ee7fb1e6f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 L'elemento `title` è uno dei vari elementi che forniscono informazioni aggiuntive non visibili sulla pagina web, ma utili per i motori di ricerca e la visualizzazione della pagina.
 
-All'interno dell'elemento `head`, annida un elemento `meta` con `utf-8` come valore dell'attributo `charset` per comunicare al browser come codificare i caratteri della pagina. Nota che gli elementi `meta` sono autoconcludenti.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 Il codice dovrebbe avere un tag `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Il tag `meta` dovrebbe avere un attributo `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 L'attributo `charset` dovrebbe avere valore `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 856e4aa4044..29fde904c77 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Il codice dovrebbe avere un elemento `link`.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 Non dovresti cambiare l'elemento `head` esistente. Assicurati di non aver eliminato il tag di chiusura.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-Dovresti avere un elemento `link` auto-concludente.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 L'elemento `link` dovrebbe essere all'interno dell'elemento `head`.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index bde39deb4aa..4a7fb75a93d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 È possibile utilizzare un elemento `hr` per visualizzare un separatore tra sezioni con diverso contenuto.
 
-Aggiungi un elemento `hr` tra l'elemento `p` con la classe `established` e il primo elemento `section`. Nota che gli elementi `hr` sono autoconcludenti.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-Dovresti aggiungere un elemento `hr`. Gli elementi `hr` sono autoconcludenti.
+Dovresti aggiungere un elemento `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-Non dovresti cambiare l'elemento `p` con la classe `established` esistente.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-Non dovresti cambiare l'elemento `main` esistente.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-L'elemento `hr` dovrebbe essere tra l'elemento `p` e l'elemento `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 5c2d01c85a6..be4dd6e36cf 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ Sotto l'intestazione `Coffee`, aggiungi un'immagine usando l'url `https://cdn.fr
 
 # --hints--
 
-Dovresti avere un tag `<img>`. Ricorda che gli elementi `img` sono autoconcludenti.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-L'elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-L'elemento `img` dovrebbe avere un attributo `alt` con il valore `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index ba2d39f87eb..760a1ea403d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-Le transizioni del gradiente spesso si verificano gradualmente da un colore all'altro. Puoi fare in modo che il cambio avvenga con un linea solida, in questo modo:
+Le transizioni del gradiente spesso si verificano gradualmente da un colore all'altro. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 8f411567c06..cf4013875fe 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Puoi aggiungere immagini al tuo sito web utilizzando l'elemento `img`. Gli elementi `img` hanno un tag di apertura senza un tag di chiusura. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+Puoi aggiungere immagini al tuo sito web utilizzando l'elemento `img`. Gli elementi `img` hanno un tag di apertura senza un tag di chiusura. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 Aggiungi un elemento `img` sotto l'elemento `p`. A questo punto, nessuna immagine verrà visualizzata nel browser.
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index 6c11aa35945..34e460e03c6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 La prossima proprietà di posizione è `absolute`. Quando si usa il valore `absolute` per la proprietà `position`, l'elemento viene tolto dal normale flusso del documento e la sua posizione è determinata dalle proprietà `top`, `right`, `bottom` e `left`.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index 92d06969f51..0046ede4bae 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ La funzione `getCaloriesFromInputs` imposterà il flag di errore globale su `tru
 
 # --hints--
 
-La funzione `calculateCalories` dovrebbe avere un'istruzione `if`.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-L'istruzione `if` dovrebbe verificare se la variabile `isError` è truthy.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ L'istruzione `if` dovrebbe usare `return` per terminare l'esecuzione della funzi
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/italian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
index 2f94f0bcfea..cc559982571 100644
--- a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
+++ b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7b86367417b2b2512b3c
-title: Use Caution When Reinitializing Variables Inside a Loop
+title: 반복문 내부의 변수를 초기화할 때 주의하기
 challengeType: 1
 forumTopicId: 301194
 dashedName: use-caution-when-reinitializing-variables-inside-a-loop
@@ -8,29 +8,29 @@ dashedName: use-caution-when-reinitializing-variables-inside-a-loop
 
 # --description--
 
-Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop.
+반복문 안에서 정보를 저장하거나 카운터를 늘리거나 변수를 다시 설정해야 하는 경우가 있습니다. 잠재적인 문제는 변수를 다시 초기화해야 하는데 그렇게 하지 않은 경우 또는 그 반대의 경우입니다. 종료 조건에 사용 중인 변수를 실수로 재설정하여 무한 루프를 유발하는 경우에 특히 위험합니다.
 
-Printing variable values with each cycle of your loop by using `console.log()` can uncover buggy behavior related to resetting, or failing to reset a variable.
+`console.log()`를 사용하여 루프의 각 주기마다 변수 값을 출력하면 변수를 재설정하거나 재설정하지 않는 것와 관련된 버그가 있는 동작을 발견할 수 있습니다.
 
 # --instructions--
 
-The following function is supposed to create a two-dimensional array with `m` rows and `n` columns of zeroes. Unfortunately, it's not producing the expected output because the `row` variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like `[[0, 0], [0, 0], [0, 0]]`.
+다음 함수는 `m`개의 행과 `n`개의 열로 구성된 0으로 채워진 2차원 배열을 생성해야 합니다. 안타깝게도 바깥에 있는 루프에서 `row` 변수가 다시 초기화(빈 배열로 다시 설정) 되지 않아 출력 기대값을 생성하지 못하고 있습니다. `[[0, 0], [0, 0], [0, 0]]`와 같이 올바른 0의 3x2 배열을 반환하도록 코드를 수정합니다.
 
 # --hints--
 
-Your code should set the `matrix` variable to an array holding 3 rows of 2 columns of zeroes each.
+코드에서 `matrix` 변수를 각각 2개 열로 구성된 3행을 갖는 0으로 채워진 배열로 설정해야 합니다.
 
 ```js
 assert(JSON.stringify(matrix) == '[[0,0],[0,0],[0,0]]');
 ```
 
-The `matrix` variable should have 3 rows.
+`matrix` 변수는 3개의 행이 있어야 합니다.
 
 ```js
 assert(matrix.length == 3);
 ```
 
-The `matrix` variable should have 2 columns in each row.
+`matrix` 변수는 각 행당 2개의 열이 있어야 합니다.
 
 ```js
 assert(
@@ -38,7 +38,7 @@ assert(
 );
 ```
 
-`zeroArray(4,3)` should return an array holding 4 rows of 3 columns of zeroes each.
+`zeroArray(4,3)`는 각각 0이 3개 열로 구성된 4개의 행을 포함하는 배열을 반환해야 합니다.
 
 ```js
 assert(JSON.stringify(zeroArray(4,3)) == '[[0,0,0],[0,0,0],[0,0,0],[0,0,0]]');
diff --git a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
index 4174c9b679e..958faa70276 100644
--- a/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
+++ b/curriculum/challenges/korean/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
@@ -1,6 +1,6 @@
 ---
 id: 587d7db0367417b2b2512b81
-title: Understand Where an Object’s Prototype Comes From
+title: 객체의 프로토타입의 근원 이해하기
 challengeType: 1
 forumTopicId: 301330
 dashedName: understand-where-an-objects-prototype-comes-from
@@ -8,7 +8,7 @@ dashedName: understand-where-an-objects-prototype-comes-from
 
 # --description--
 
-Just like people inherit genes from their parents, an object inherits its `prototype` directly from the constructor function that created it. For example, here the `Bird` constructor creates the `duck` object:
+인간이 부모로부터 유전자를 전달받듯이 객체도 객체를 생성한 생성자 함수로부터 직접 `prototype`을 상속받습니다. 예를 들면 여기 생성자 `Bird`가 `duck` 객체를 생성합니다.
 
 ```js
 function Bird(name) {
@@ -18,21 +18,21 @@ function Bird(name) {
 let duck = new Bird("Donald");
 ```
 
-`duck` inherits its `prototype` from the `Bird` constructor function. You can show this relationship with the `isPrototypeOf` method:
+`duck`은 생성자 함수 `Bird`로부터 `prototype`을 상속받습니다. `isPrototypeOf` 메소드를 통해 이 관계를 확인할 수 있습니다.
 
 ```js
 Bird.prototype.isPrototypeOf(duck);
 ```
 
-This would return `true`.
+이것은 `true`를 반환할 것입니다.
 
 # --instructions--
 
-Use `isPrototypeOf` to check the `prototype` of `beagle`.
+`beagle`의 `prototype`을 확인하기 위해 `isPrototypeOf`을 사용하시오.
 
 # --hints--
 
-You should show that `Dog.prototype` is the `prototype` of `beagle`
+`Dog.prototype`은 `beagle`의 `prototype`이라는 것을 보여줘야 합니다.
 
 ```js
 assert(/Dog\.prototype\.isPrototypeOf\(beagle\)/.test(__helpers.removeJSComments(code)));
diff --git a/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 94fb146dd4b..ef57baf6975 100644
--- a/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/korean/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/korean/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index 78b9f6c51f1..1e629e9e282 100644
--- a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 37fb4314e37..46947ba1ca0 100644
--- a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/korean/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/korean/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 3f861d26087..656b30e9954 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 Within the second `section` element, add two `div` elements with a class of `question-block`.
 
-Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ You should give the second new `div` element a class of `question-block`.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-You should nest one `p` element within each `div.question-block` element.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-You should give the first `p` element text of `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-You should give the second `p` element text of `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 You should nest one `fieldset` element within each `div.question-block` element.
@@ -55,16 +55,16 @@ You should nest one `fieldset` element within each `div.question-block` element.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-You should place the first `fieldset` element after the first `p` element.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-You should place the second `fieldset` element after the second `p` element.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 You should give the first `fieldset` element a class of `question`.
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index e8595cf71f6..4dd67ed7d5e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 869b9b4f00c..0c12da8fe01 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index da457d42494..a7c561eb23a 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index e8a3805467a..d5e1e59b59a 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index e99dc640bf4..51333012b99 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 5245fabd26e..941435914cd 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index b4133d928a7..4fe78c29572 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index 0a4b4001307..d9368bd9eeb 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 78348b283e3..e561b25b007 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index 51c632350a0..55fd840e2df 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 6c61ca079f3..c10646b2f9e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 340737dbadc..d299fbc9d0a 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index 8664c53e6f1..6bf98bf2976 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 3051a6aaeed..612fc5615bc 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 61130f96b88..e141775e12d 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index d231258ad78..8e8ecb1f834 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 1a0b76e0fa2..b7e66b39556 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 470a6ddcc59..d0cd5544f52 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index bf7de246f7b..d35207664f4 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index 3639ae05863..4cfc98a8f20 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index bc4ba3fe935..fd13e427b98 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 0ee42b723c4..32cb990be4b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index f273abc61f0..05b1ba761f9 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index e175d20b657..fc09c0163b3 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 426a9a59591..334fbb4f486 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 9b62116748e..420c72a560e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index f53394a6204..e3a8cf3069e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 728a1436bfd..61f0b37db37 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 93d94edd6fc..68bf7dc4dcf 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 16966623394..1b07a4ae0e1 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index e3aba867223..8d1b9dff473 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index b48b51fa05b..14049560389 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index a8f1a25cdff..8458e218910 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index eaaee5f6275..10a87a569fc 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 01999483d95..d3f92583633 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index 5a6a3c74f5d..14311f92160 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 797991f5d76..70dcb8bc846 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 70f779b9c05..0697cd9c54b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index 590e573b687..eb7361825c5 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 5a9bf91025c..fbb8cd219f1 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index a3ca9cc273b..21911a2531a 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 1d96c1e0d79..7274db38799 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 7c8e373a1d4..bc60a161e8e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed.
 
-Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 You should have a `meta` tag.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Your `meta` tag should have a `charset` attribute.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Your `charset` attribute should have a value of `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 0b481a3d272..251ff377cdb 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Your code should have a `link` element.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 You should not change your existing `head` element. Make sure you did not delete the closing tag.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-You should have one self-closing `link` element.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 Your `link` element should be within your `head` element.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index d5997915ace..c5f5ea76b7a 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 You can use an `hr` element to display a divider between sections of different content.
 
-First, add an `hr` element between the `p` element with the class `established` and the first `section` element. Note that `hr` elements are self closing.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-You should add an `hr` element. `hr` elements are self-closing.
+You should add an `hr` element.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
+```
+
+The `hr` element is a void element, it should not have an end tag `</hr>`.
+
+```js
+assert.notMatch(code, /<\/hr>/i);
 ```
 
 You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('p.established').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
 You should not change your existing `main` element.
 
 ```js
-assert($('main').length === 1);
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
 ```
 
 Your `hr` element should be between your `p` element and your `section` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index aa69085c4b3..253c6ea66a6 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp
 
 # --hints--
 
-You should have an `<img>` tag. Remember that `img` elements are self-closing.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-Your `img` element should have an `alt` attribute of `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index b70bae5c655..20a72694829 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-Gradient transitions often gradually change from one color to another. You can make the change a solid line like this:
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 0e8779f7284..92ef311a236 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 Add an `img` element below the `p` element. At this point, no image will show up in the browser.
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index 02568571634..7685dc65cd9 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 The next position property is `absolute`. When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/korean/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/korean/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 06093f5c4c4..a54dc794bb7 100644
--- a/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Escreva um mixin chamado `shape` e dê a ele 3 parâmetros: `$w`, `$h` e `$bg-color`.
 
-Use o mixin `shape` para dar ao elemento `#square` uma largura (w) e uma altura (h) de `50px`, e a cor de fundo `red` (vermelha). Para o elemento `#rect-a`, adicione uma largura (w) de `100px`, uma altura (h) de `50px` e a cor de fundo `blue` (azul). Finalmente, para o elemento `#rect-b`, adicione uma largura (w) de `50px`, uma altura (h) de `100px` e a cor de fundo `orange` (laranja).
+Use o mixin `shape` para dar ao elemento `#square` uma largura (w) e uma altura (h) de `50px` e a cor de fundo `red` (vermelha). Para o elemento `#rect-a`, adicione uma largura (w) de `100px`, uma altura (h) de `50px` e a cor de fundo `blue` (azul). Finalmente, para o elemento `#rect-b`, adicione uma largura (w) de `50px`, uma altura (h) de `100px` e a cor de fundo `orange` (laranja).
 
 # --hints--
 
@@ -101,19 +101,19 @@ assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi
 Você deve substituir os estilos dentro do seletor `#square` por uma chamada ao mixin `shape` usando a palavra-chave `@include`. Definindo uma largura e altura de `50px` e a cor de fundo `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
 Você deve substituir os estilos dentro do seletor `#rect-a` por uma chamada ao mixin `shape` mixin usando a palavra-chave `@include`. Definindo uma largura de `100px`, uma altura de `50px` e a cor de fundo `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
 Você deve substituir os estilos dentro do seletor `#rect-b` por uma chamada ao mixin `shape` usando a palavra-chave `@include`. Definindo uma largura de `50px`, uma altura de `100px` e a cor de fundo `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 2f32b3cd9a0..0b7a1644843 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. Ela deve ser capaz de instanciar objetos com base em diferentes categorias de orçamento, como *alimentos* (food), *vestuário* (clothing) e *entretenimento* (entertainment). Quando os objetos são criados, eles são passados com o nome da categoria. A classe deve ter uma variável de instância chamada `ledger` que seja uma lista. A classe também deve conter os seguintes métodos:
 
-- Um método `deposit`, que aceita um valor e uma descrição. Se nenhuma descrição for dada, o padrão deverá ser uma string vazia. O método deve acrescentar um objeto à lista ledger na forma de `{"amount": amount, "description": description}`.
+- Um método `deposit`, que aceita um valor e uma descrição. Se nenhuma descrição for dada, o padrão deverá ser uma string vazia. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - Um método `withdraw`, semelhante ao método `deposit`, mas a quantia passada deve ser armazenada no ledger como um número negativo. Se não houver fundos suficientes, nada deve ser adicionado ao ledger. Este método deve retornar `True` se a retirada acontecer e, caso contrário, `False`.
 - Um método `get_balance`, que retorna o saldo atual da categoria de orçamento com base nos depósitos e retiradas que ocorreram.
-- Um método `transfer`, que aceita um valor e outra categoria de orçamento como argumentos. O método deverá adicionar uma retirada com o valor e a descrição "Transfer to [categoria de destino no orçamento]". O método deve, então, adicionar um depósito à outra categoria do orçamento, com o valor e a descrição "Transfer from [categoria de origem no orçamento]". Se não houver fundos suficientes, nada deve ser adicionado ao ledger. Este método deve retornar `True` se a transferência acontecer e, caso contrário, `False`.
+- Um método `transfer`, que aceita um valor e outra categoria de orçamento como argumentos. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. Se não houver fundos suficientes, nada deve ser adicionado ao ledger. Este método deve retornar `True` se a transferência acontecer e, caso contrário, `False`.
 - Um método `check_funds` que aceita um valor como um argumento. Ele retorna `False` se o valor for maior que o saldo da categoria do orçamento e, caso contrário, retorna `True`. Este método deve ser usado tanto pelo método `withdraw` como pelo método `transfer`.
 
 Quando o objeto de orçamento for impresso, ele deve mostrar:
@@ -25,11 +25,11 @@ Quando o objeto de orçamento for impresso, ele deve mostrar:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Além da classe `Category`, crie uma função (fora da classe) chamada `create_spend_chart`, que recebe uma lista de categorias como um argumento. Ela deve retornar uma string, que é um gráfico de barras.
 
-O gráfico deve mostrar a porcentagem gasta em cada categoria passada para a função. A porcentagem gasta deve ser calculada apenas com retiradas, não com depósitos. No lado esquerdo do gráfico, deve haver rótulos de 0 a 100. As "barras" no gráfico de barras devem ser feitas com o caractere "o". A altura de cada barra deve ser arredondada para baixo para o 10 mais próximo. A linha horizontal abaixo das barras deve ir dois espaços além da barra final. O nome de cada categoria deve ser escrito verticalmente abaixo da barra. Deve haver um título no topo que diz "Percentage spent by category" (Porcentagem gasta por categoria).
+O gráfico deve mostrar a porcentagem gasta em cada categoria passada para a função. A porcentagem gasta deve ser calculada apenas com retiradas, não com depósitos. No lado esquerdo do gráfico, deve haver rótulos de 0 a 100. The 'bars' in the bar chart should be made out of the 'o' character. A altura de cada barra deve ser arredondada para baixo para o 10 mais próximo. A linha horizontal abaixo das barras deve ir dois espaços além da barra final. O nome de cada categoria deve ser escrito verticalmente abaixo da barra. There should be a title at the top that says 'Percentage spent by category'.
 
 Esta função será testada com até quatro categorias.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index 3dbf792ef79..0f6512bc954 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-Um chapéu será sempre criado com pelo menos uma bola. Os argumentos passados para o objeto de chapéu após a criação devem ser convertidos em uma variável de instância `contents`. `contents` deve ser uma lista de strings contendo um item para cada bola no chapéu. Cada item da lista deve ser um nome de cor que representa uma única bola dessa cor. Por exemplo, se sua instância de Hat for `{"red": 2, "blue": 1}`, `contents` deve ser `["red", "red", "blue"]`.
+Um chapéu será sempre criado com pelo menos uma bola. Os argumentos passados para o objeto de chapéu após a criação devem ser convertidos em uma variável de instância `contents`. `contents` deve ser uma lista de strings contendo um item para cada bola no chapéu. Cada item da lista deve ser um nome de cor que representa uma única bola dessa cor. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 A classe `Hat` deve ter um método `draw` que aceita um argumento indicando o número de bolas a serem retiradas do chapéu. Este método deve remover bolas aleatoriamente de `contents` e retornar essas bolas como uma lista de strings. As bolas não devem voltar ao chapéu durante a retirada, à semelhança de uma experiência sem substituição. Se o número de bolas a serem retiradas exceder a quantidade disponível, retorne todas as bolas.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). Esta função deve aceitar os seguintes argumentos:
 
 - `hat`: Um objeto de chapéu contendo bolas que devem ser copiadas dentro da função.
-- `expected_balls`: Um objeto indicando o grupo exato de bolas que se tentará retirar do chapéu para o experimento. Por exemplo, para determinar a probabilidade de retirar 2 bolas azuis e 1 bola vermelha do chapéu, defina `expected_balls` como `{"blue":2, "red":1}`.
+- `expected_balls`: Um objeto indicando o grupo exato de bolas que se tentará retirar do chapéu para o experimento. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: O número de bolas a serem retiradas do chapéu em cada experimento.
 - `num_experiments`: O número de experimentos a serem realizados. Quanto mais experimentos realizados, mais precisa será a probabilidade aproximada.
 
@@ -40,7 +40,7 @@ Veja como você chamaria a função `experiment` com base no exemplo acima de 2.
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index b47b255b314..0ae3e0b9679 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index d1bf8f7a79c..7e59ca30ed3 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index dc78a9396c5..5e57a6d1de3 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 48ec2d95e26..6bb56599282 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 Dentro do segundo elemento `section`, adicione dois elementos `div` com uma classe `question-block`.
 
-Agora, dentro de cada `div.question-block`, adicione um elemento `p` com texto de números sendo incrementados, começando em `1`, e um elemento `fieldset` com uma classe de `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ Você deve dar ao segundo novo elemento `div` uma classe de `question-block`.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-Você deve colocar um elemento `p` dentro de cada elemento `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-Você deve dar ao primeiro elemento `p` o texto `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-Você deve dar ao segundo elemento `p` o texto `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 Você deve colocar um elemento `fieldset` dentro de cada elemento `div.question-block`.
@@ -55,16 +55,16 @@ Você deve colocar um elemento `fieldset` dentro de cada elemento `div.question-
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-Você deve posicionar o primeiro elemento `fieldset` depois do primeiro elemento `p`.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-Você deve posicionar o segundo elemento `fieldset` depois do segundo elemento `p`.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 Você deve dar ao primeiro elemento `fieldset` uma classe de `question`.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index f637d83b22b..2bd6fab7be8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index ff027432ea4..ee7859a0480 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index d0c6d43c5dd..b436d93310f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 137e9b42bcf..ba9268dff9c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index a7b838ce9a7..b57ec173c82 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index 1e8a4b7ba8c..fa22e51d5b8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index 70a4508e0eb..4573cda8048 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index c64fce20775..906333d3e2a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index ed7d17ce7c2..33340e86fc3 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index b6a8f2305d2..3e50b5022a6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index 08236634eac..f8e2bd2364c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index ce7bdac22be..bb69baa5cff 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index 9f1b9a152f4..babe2011d7c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index 211f0f17f96..008657862b0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index 58f2444fa83..8a5d308aef5 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index afcf6cc81af..0f296ef7bfd 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 8727bc97cde..8431f8ac7bd 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index b9d57a7056b..adba9ec5e10 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index c8b8c5c6429..353c0647e2a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index bd82d853e53..6a3dab478f9 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index ac87361b541..9c0c8fa571c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index d7bd4cf041d..121424558d6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index 96286881991..c6bb2f5fa2e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 6c449a1d67d..a266a6bc306 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 65942072bf3..2fd1d95e22a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index d2f32a0ff1d..cf1098e7067 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index b351e756b9c..c6df81971af 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index bc498931436..3ae7d2add4e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 8864b709bb4..fac3cae91ce 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 5038d7eb3d6..cf55237ff17 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index c577535ba42..de40770cdc3 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 818d3e3e20c..33a9ce96c7e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index 0bb39c870ed..e27f685888e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index 10fc7149b2c..c3fc4199a8f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 78f15875836..c845a87ca36 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index eba5a59655c..26677f3a250 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index 9e3050e7cbc..ce345af710f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 47c2d326456..3c8553ad381 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index b6795633655..f6347d3347c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index 31e2f4b9b2a..98f5b20f0f6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index cf1aa0ef208..5470e118a64 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 20e94c20b87..228c4097923 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 2a052846f53..52396832adc 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 O `title` é um dos vários elementos que fornecem informações extras que não são visíveis na página da web, mas ele é útil para mecanismos de busca ou até mesmo em como a página é exibida.
 
-Dentro do elemento `head`, adicione um elemento `meta` com um atributo chamado `charset` definido para o valor `utf-8` para dizer ao navegador como codificar caracteres para a página. Note que os elementos `meta` fecham em si mesmos.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 Você deve criar uma tag `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 A tag `meta` deve ter um atributo `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Seu atributo `charset` deve ter um valor de `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index ce02141d239..1eb68cac14c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ O código deve ter um elemento `link`.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 Você não deve mudar o elemento `head` existente. Verifique se você não excluiu a tag de fechamento.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-Você deve ter um elemento `link` de autofechamento.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 O elemento `link` deve estar dentro do elemento `head`.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 O elemento `link` deve ter o atributo `href` com o valor `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index c2a944d6e2f..6139de2ae81 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 Você pode usar um elemento `hr` para exibir um divisor entre seções de conteúdo diferente.
 
-Primeiro, adicione um elemento `hr` entre o elemento `p` com a classe `established` e o primeiro elemento `section`. Observe que os elementos `hr` fecham em si mesmos.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-Você deve adicionar um elemento `hr`. Observe que os elementos `hr` fecham em si mesmos.
+Você deve adicionar um elemento `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-Você não deve alterar o elemento `p` existente com a classe `established`.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-O elemento preexistente `main` deve permanecer o mesmo.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-O elemento `hr` deve estar entre os elementos `p` e `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index f0451f1479e..81d91e520c7 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ Sob o título `Coffee`, adicione uma imagem usando o url `https://cdn.freecodeca
 
 # --hints--
 
-Você deve ter uma tag `<img>`. Lembre-se de que os elementos `img` são de fechamento automático.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-O elemento `img` deve ter para o atributo `src` o valor de `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-O elemento `img` deve ter para o atributo `alt` o valor de `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index 0fe8d97057a..452d85775b6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-As transições gradientes muitas vezes mudam gradualmente de uma cor para outra. Você pode fazer a alteração uma linha sólida como esta:
+As transições gradientes muitas vezes mudam gradualmente de uma cor para outra. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index fd573b5947e..306f0dc9907 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Você pode adicionar imagens a um site da web usando o elemento `img`. Elementos `img` têm uma tag de abertura, mas não têm a tag de fechamento. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+Você pode adicionar imagens a um site da web usando o elemento `img`. Elementos `img` têm uma tag de abertura, mas não têm a tag de fechamento. Um elemento que não precisa de uma tag de fechamento é conhecido como <dfn>elemento nulo</dfn>.
 
 Adicione um elemento `img` abaixo do elemento `p`. Neste momento, nenhuma imagem será exibida no navegador.
 
@@ -19,7 +19,7 @@ O elemento `img` deve ter uma tag de abertura. As tags de abertura têm essa sin
 assert(document.querySelector('img'));
 ```
 
-Your `img` element should not have a closing tag `</img>`.
+O elemento `img` não deve ter uma tag de fechamento `</img>`.
 
 ```js
 assert(!code.match(/<\/img\>/));
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 0f9f888b1c0..65573520605 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -7,7 +7,7 @@ dashedName: step-37
 
 # --description--
 
-O elemento `input` permite a você várias maneiras de coletar dados a partir de um formulário da web. Like `img` elements, `input` elements are a <dfn>void element</dfn> and do not need closing tags.
+O elemento `input` permite a você várias maneiras de coletar dados a partir de um formulário da web. Assim como os elementos `img`, os elementos `input` são de <dfn>elementos nulos</dfn> e não precisam de tags de fechamento.
 
 Adicione um elemento `input` dentro do elemento `form`.
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index a465e57e900..c26fcb64329 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -15,7 +15,7 @@ Aqui está um exemplo de um botão de opção com a opção `cat`:
 <input type="radio"> cat
 ```
 
-Remember that an `input` element is a void element.
+Lembre-se de que um elemento `input` é um elemento nulo.
 
 Antes da entrada de texto, adicione um botão de opção com a opção definida como:
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 8f3a782d10c..806fb5763ac 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -7,7 +7,7 @@ dashedName: step-69
 
 # --description--
 
-You can set browser behavior by adding `meta` elements in the `head`. Aqui está um exemplo:
+Você pode definir o comportamento do navegador adicionando elementos `meta` em `head`. Aqui está um exemplo:
 
 ```html
 <meta attribute="value">
@@ -15,13 +15,13 @@ You can set browser behavior by adding `meta` elements in the `head`. Aqui está
 
 Dentro do elemento `head`, aninhe um elemento `meta` com um atributo chamado `charset`. Defina o valor como `utf-8`, o que diz ao navegador como codificar os caracteres para a página.
 
-Note that the `meta` element is a void element.
+Observe que um elemento `meta` é um elemento nulo.
 
 Com essa última alteração, você completou o projeto do aplicativo de fotos de gatos. Parabéns!
 
 # --hints--
 
-You should create a `meta` element within the `head` element.
+Você deve criar um elemento `meta` dentro do elemento `head`.
 
 ```js
 assert.exists(document.querySelector('head > meta'));
@@ -33,7 +33,7 @@ Você deve dar ao elemento `meta` um `charset` de `UTF-8`.
 assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
 ```
 
-Your `meta` element should be a void element, you don't need to add `</meta>`.
+O elemento `meta` deve ser um elemento nulo. Você não precisa adicionar `</meta>`.
 
 ```js
 assert.notMatch(code, /<\/meta\s*>?/i);
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
index 5fa64a84d9e..d25a15b98d9 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
@@ -7,7 +7,7 @@ dashedName: step-4
 
 # --description--
 
-Add a `title` and `meta` element inside the `head` element. Give your project a title of `Registration Form`, and add the `charset` attribute with a value of `utf-8` to your `meta` element.
+Adicione um elemento `title` e um elemento `meta` dentro do elemento `head`. Dê ao projeto o título de `Registration Form` e adicione um atributo `charset` com um valor de `utf-8` ao elemento `meta`.
 
 # --hints--
 
@@ -18,32 +18,32 @@ const title = document.querySelector('title');
 assert.exists(title);
 ```
 
-Your `title` element should be within the `head` element.
+O elemento `title` deve estar dentro do elemento `head`.
 
 ```js
 assert.exists(document.querySelector('head > title'));
 ```
 
-Your project should have a title of `Registration Form`. Lembre-se, maiúsculas, minúsculas e a ortografia são importantes para o título.
+O projeto deve ter o título `Registration Form`. Lembre-se, maiúsculas, minúsculas e a ortografia são importantes para o título.
 
 ```js
 const title = document.querySelector('title');
 assert.equal(title.text, 'Registration Form');
 ```
 
-You should create a `meta` element within the `head` element.
+Você deve criar um elemento `meta` ao redor do elemento `head`.
 
 ```js
 assert.exists(document.querySelector('head > meta'));
 ```
 
-You should give the `meta` element a `charset` attribute with the value of `utf-8`.
+Você deve dar ao elemento `meta` um atributo `charset` com o valor `utf-8`.
 
 ```js
 assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
 ```
 
-Your `meta` element should be a void element, it does not have an end tag `</meta>`.
+O elemento `meta` deve ser um elemento nulo, sem uma tag final `</meta>`.
 
 ```js
 assert.notMatch(code, /<\/meta\s*>?/i);
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index 4d6e0814773..d4cc0099fb7 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -7,57 +7,57 @@ dashedName: step-22
 
 # --description--
 
-Now you will learn a CSS trick to draw triangles.
+Agora, você aprenderá um truque do CSS para desenhar triângulos.
 
-This will be used to draw ears on the cat.
+Ele será usado para desenhar as orelhas do gato.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Usando um seletor de classe, dê ao elemento `.cat-right-ear` as propriedades `height` (altura) e `width` (largura) definido as duas como `100px`. Defina a`background-color` como `white`. Defina as bordas da direita e da esquerda como `35px solid blue`. Defina as bordas superior e inferior como `35px solid red`.
 
 # --hints--
 
-You should have a `.cat-right-ear` selector.
+Você deve ter um seletor `.cat-right-ear`.
 
 ```js
 assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
 ```
 
-Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `height` definida como `100px`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
 ```
 
-Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `width` definida como `100px`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
 ```
 
-Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `background-color` definida como `white`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
 ```
 
-Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-left` definida como `35px solid blue`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
 ```
 
-Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-right` definida como `35px solid blue`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
 ```
 
-Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-top` definida como `35px solid red`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
 ```
 
-Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-bottom` definida como `35px solid red`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md
index 3ec36eaac56..bc983bbf7f4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md
@@ -1,6 +1,6 @@
 ---
 id: 646cecc9eb5c4f4f73dafd07
-title: Step 25
+title: Passo 25
 challengeType: 0
 dashedName: step-25
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md
index 2d9c1de0e1b..1f7d904dba3 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md
@@ -1,6 +1,6 @@
 ---
 id: 646cef0c2b98915094df7099
-title: Step 26
+title: Passo 26
 challengeType: 0
 dashedName: step-26
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md
index b084a6ddc55..136fe46c490 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md
@@ -1,6 +1,6 @@
 ---
 id: 646cf1206cac5f51804f49cf
-title: Step 27
+title: Passo 27
 challengeType: 0
 dashedName: step-27
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md
index 4e4589df7c9..1faeac546b1 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md
@@ -1,6 +1,6 @@
 ---
 id: 646cf2249f02ca5233d9af7c
-title: Step 28
+title: Passo 28
 challengeType: 0
 dashedName: step-28
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md
index 095bc310848..dda192666e7 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md
@@ -1,6 +1,6 @@
 ---
 id: 646cf48d8f8e1f535a1821d3
-title: Step 29
+title: Passo 29
 challengeType: 0
 dashedName: step-29
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
index 920c0a45e02..594eb67a663 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
@@ -1,6 +1,6 @@
 ---
 id: 646cf6cbca98e258da65c979
-title: Step 30
+title: Passo 30
 challengeType: 0
 dashedName: step-30
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md
index 2ef29da9e97..20c9b5e6a78 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md
@@ -1,6 +1,6 @@
 ---
 id: 646cf88aa884405a11ea5bcc
-title: Step 31
+title: Passo 31
 challengeType: 0
 dashedName: step-31
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md
index b8d4455c7c4..1cc391bb4c3 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md
@@ -1,6 +1,6 @@
 ---
 id: 646cfc2b8e6fe95c20a819d5
-title: Step 32
+title: Passo 32
 challengeType: 0
 dashedName: step-32
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md
index 669d0098204..c0d1e3677a2 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md
@@ -1,6 +1,6 @@
 ---
 id: 646cfd853634255d02b64cc1
-title: Step 33
+title: Passo 33
 challengeType: 0
 dashedName: step-33
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
index 4d1992e5842..7e6389cc80c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
@@ -1,6 +1,6 @@
 ---
 id: 646cfde6ac612e5d60391f50
-title: Step 34
+title: Passo 34
 challengeType: 0
 dashedName: step-34
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md
index f6e51862889..cd9c3d68294 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md
@@ -1,6 +1,6 @@
 ---
 id: 646dd556d524bc61c0139bd6
-title: Step 35
+title: Passo 35
 challengeType: 0
 dashedName: step-35
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md
index 08d714ee012..85c8799649d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md
@@ -1,6 +1,6 @@
 ---
 id: 646dd6f9caa862627dd87772
-title: Step 36
+title: Passo 36
 challengeType: 0
 dashedName: step-36
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
index de01536339c..89c45da5af6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
@@ -1,6 +1,6 @@
 ---
 id: 646dd7cfd0cfac630c1dd520
-title: Step 37
+title: Passo 37
 challengeType: 0
 dashedName: step-37
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
index 24f0f2b34ff..37150bdfb92 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
@@ -1,6 +1,6 @@
 ---
 id: 646dd8c79ec23463a3d0e356
-title: Step 38
+title: Passo 38
 challengeType: 0
 dashedName: step-38
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md
index 52ffb5b9d75..619470df88a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md
@@ -1,6 +1,6 @@
 ---
 id: 646dd9d9a729916460724f16
-title: Step 39
+title: Passo 39
 challengeType: 0
 dashedName: step-39
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md
index d65810ba08d..354d3980d4d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md
@@ -1,6 +1,6 @@
 ---
 id: 646ddab8afd73764f5241bbf
-title: Step 40
+title: Passo 40
 challengeType: 0
 dashedName: step-40
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
index 7573cb59fc8..649cc1f4fcf 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
@@ -1,6 +1,6 @@
 ---
 id: 646ddb61ff08366570cc5902
-title: Step 41
+title: Passo 41
 challengeType: 0
 dashedName: step-41
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md
index 054f1f208c4..54715eb5040 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md
@@ -1,6 +1,6 @@
 ---
 id: 646ddd3f9f97a0667b964bdb
-title: Step 42
+title: Passo 42
 challengeType: 0
 dashedName: step-42
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md
index b84ad002d6f..ead26f2df38 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md
@@ -1,6 +1,6 @@
 ---
 id: 646dde7dc20dc167489faa69
-title: Step 43
+title: Passo 43
 challengeType: 0
 dashedName: step-43
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md
index f09e84acab8..9f2a965c4bf 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md
@@ -1,6 +1,6 @@
 ---
 id: 646ddf888632fa67f1180940
-title: Step 44
+title: Passo 44
 challengeType: 0
 dashedName: step-44
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md
index a3fefd33185..c9dcb4d059a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md
@@ -1,6 +1,6 @@
 ---
 id: 646de5dc8988076a1d992afd
-title: Step 45
+title: Passo 45
 challengeType: 0
 dashedName: step-45
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md
index 2c99a23eede..c2d3873b4d1 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md
@@ -1,6 +1,6 @@
 ---
 id: 646de6a97b50a86ac487de86
-title: Step 46
+title: Passo 46
 challengeType: 0
 dashedName: step-46
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md
index eb11dcf2887..ee3e336bcae 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md
@@ -1,6 +1,6 @@
 ---
 id: 646de7b64467e96b7d35b5cd
-title: Step 47
+title: Passo 47
 challengeType: 0
 dashedName: step-47
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md
index d12a13ad0c5..08ccbf5c0fb 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md
@@ -1,6 +1,6 @@
 ---
 id: 646de8478d6f796bfbdccfb2
-title: Step 48
+title: Passo 48
 challengeType: 0
 dashedName: step-48
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md
index 642359c809b..d85d0bc7763 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md
@@ -1,6 +1,6 @@
 ---
 id: 646de8d204a3426c7d184372
-title: Step 49
+title: Passo 49
 challengeType: 0
 dashedName: step-49
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md
index febb78117dd..10331d43673 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md
@@ -1,6 +1,6 @@
 ---
 id: 646dea1c98c2426d43a705c3
-title: Step 50
+title: Passo 50
 challengeType: 0
 dashedName: step-50
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md
index cef3c792438..f35aaf5b3b1 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md
@@ -1,6 +1,6 @@
 ---
 id: 646deb169847f86df0f95bfc
-title: Step 51
+title: Passo 51
 challengeType: 0
 dashedName: step-51
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
index d17020cd864..9108ff51659 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
@@ -1,6 +1,6 @@
 ---
 id: 646dec359bef3b7811fba5a6
-title: Step 52
+title: Passo 52
 challengeType: 0
 dashedName: step-52
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md
index 55a73b1c12d..1afce506848 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md
@@ -1,6 +1,6 @@
 ---
 id: 646dedbcba062079128b2ecc
-title: Step 53
+title: Passo 53
 challengeType: 0
 dashedName: step-53
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md
index d406ede7dca..4efa2d30e00 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md
@@ -1,6 +1,6 @@
 ---
 id: 646def5e863abf7a14501421
-title: Step 54
+title: Passo 54
 challengeType: 0
 dashedName: step-54
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md
index 923ba41adc4..7301793b0d0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md
@@ -1,6 +1,6 @@
 ---
 id: 646df03c8f79337ab46f148b
-title: Step 55
+title: Passo 55
 challengeType: 0
 dashedName: step-55
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md
index 0ca2a9124a7..ab9a2765364 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md
@@ -1,6 +1,6 @@
 ---
 id: 646df0cf26413a7b35e4b8b3
-title: Step 56
+title: Passo 56
 challengeType: 0
 dashedName: step-56
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md
index b28508fe743..5303b47388a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md
@@ -1,6 +1,6 @@
 ---
 id: 646df1d1aa4ae57bdf1869c4
-title: Step 57
+title: Passo 57
 challengeType: 0
 dashedName: step-57
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md
index 4cca7bba61f..a0cea2a39e9 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md
@@ -1,6 +1,6 @@
 ---
 id: 646dffd8ce9ac77ec1906f2e
-title: Step 58
+title: Passo 58
 challengeType: 0
 dashedName: step-58
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md
index b4f20c8a1ec..8fde825d35d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md
@@ -1,6 +1,6 @@
 ---
 id: 646f0417322c0e04983a5149
-title: Step 61
+title: Passo 61
 challengeType: 0
 dashedName: step-61
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md
index dc38136e00a..ddcd3721909 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md
@@ -1,6 +1,6 @@
 ---
 id: 646f08293804a30685533c6f
-title: Step 62
+title: Passo 62
 challengeType: 0
 dashedName: step-62
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md
index e625f4b8a16..5741766db7d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md
@@ -1,6 +1,6 @@
 ---
 id: 646f09293eb3230723a62f77
-title: Step 63
+title: Passo 63
 challengeType: 0
 dashedName: step-63
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md
index f0d678e64fb..7742e30938b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md
@@ -1,6 +1,6 @@
 ---
 id: 646f0c9a1e3360092d1bbd33
-title: Step 64
+title: Passo 64
 challengeType: 0
 dashedName: step-64
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md
index 63c41d023e7..58be8606709 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md
@@ -1,6 +1,6 @@
 ---
 id: 646f0ce5737243098ad6e494
-title: Step 65
+title: Passo 65
 challengeType: 0
 dashedName: step-65
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md
index 8d93eb17bcc..fc48fa46e11 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md
@@ -1,6 +1,6 @@
 ---
 id: 646f0ef13604420a8744f7d4
-title: Step 66
+title: Passo 66
 challengeType: 0
 dashedName: step-66
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md
index 3a821ebddac..5e7e5c77e35 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md
@@ -1,6 +1,6 @@
 ---
 id: 646f0f7c5933560af8e7e380
-title: Step 67
+title: Passo 67
 challengeType: 0
 dashedName: step-67
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
index 2f49d7f5e43..51f8445dddf 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
@@ -1,6 +1,6 @@
 ---
 id: 646f102bf87b350b593baa72
-title: Step 68
+title: Passo 68
 challengeType: 0
 dashedName: step-68
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
index a5dfd111554..a8470d7f6b5 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
@@ -1,6 +1,6 @@
 ---
 id: 646f107abb89d00bb99f387a
-title: Step 69
+title: Passo 69
 challengeType: 0
 dashedName: step-69
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md
index 63d7a2c7033..dcb08aa0663 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md
@@ -1,6 +1,6 @@
 ---
 id: 646f12da0b4c5d0ca162834a
-title: Step 71
+title: Passo 71
 challengeType: 0
 dashedName: step-71
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md
index 9ea561dcf56..1f7a05a6dcb 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md
@@ -1,6 +1,6 @@
 ---
 id: 646f135eab69d90d0c6d4e9b
-title: Step 72
+title: Passo 72
 challengeType: 0
 dashedName: step-72
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md
index b8f06f01526..bb6b13121b0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md
@@ -1,6 +1,6 @@
 ---
 id: 646f159b2cffb21150b927cb
-title: Step 73
+title: Passo 73
 challengeType: 0
 dashedName: step-73
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md
index 34ec56bdcc1..292db43a99b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md
@@ -1,6 +1,6 @@
 ---
 id: 646f164bf100dd11d226161f
-title: Step 74
+title: Passo 74
 challengeType: 0
 dashedName: step-74
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
index 1ae534388f3..d25f0249fd6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
@@ -1,6 +1,6 @@
 ---
 id: 646f1764e2f1d212ba9785a7
-title: Step 75
+title: Passo 75
 challengeType: 0
 dashedName: step-75
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md
index 11acdcfadf0..a74d4b4cacd 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md
@@ -1,6 +1,6 @@
 ---
 id: 646f1802a09a171332e14630
-title: Step 76
+title: Passo 76
 challengeType: 0
 dashedName: step-76
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
index 06c6268ce51..8e27f32a7b4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
@@ -1,6 +1,6 @@
 ---
 id: 646f4d6c42dc5f214f4e7444
-title: Step 77
+title: Passo 77
 challengeType: 0
 dashedName: step-77
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md
index 53328d02569..5bd2e56c9ff 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md
@@ -1,6 +1,6 @@
 ---
 id: 646f4e46e81f7021d5fd9c1d
-title: Step 78
+title: Passo 78
 challengeType: 0
 dashedName: step-78
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md
index 08b15685562..bf4cb8ab379 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md
@@ -1,6 +1,6 @@
 ---
 id: 646f4f6a14e3c522d130a0d2
-title: Step 79
+title: Passo 79
 challengeType: 0
 dashedName: step-79
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md
index 2542e6d8626..b2bbff8f354 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md
@@ -1,6 +1,6 @@
 ---
 id: 646f4fe12b7985232bf475a5
-title: Step 80
+title: Passo 80
 challengeType: 0
 dashedName: step-80
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md
index 03270ff0101..9bcd7b9625d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md
@@ -1,6 +1,6 @@
 ---
 id: 646f507e4d1cd323f17db4fc
-title: Step 81
+title: Passo 81
 challengeType: 0
 dashedName: step-81
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md
index f06a796ea1e..231879a2db1 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md
@@ -1,6 +1,6 @@
 ---
 id: 646f516dbfc1342495515625
-title: Step 82
+title: Passo 82
 challengeType: 0
 dashedName: step-82
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index a7cb3181d77..f67dcaa594e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 A propriedade `position` seguinte é a `absolute`. Quando você usa o valor `absolute` para a propriedade `position`, o elemento é retirado do fluxo normal do documento. Então, a posição é determinada pelas propriedades `top`, `right`, `bottom` e `left`.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Defina a propriedade `position` do elemento `.cat-head` como `absolute`. Em seguida, defina as propriedades `top` e `left` com qualquer valor positivo em pixels.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
index c1bb13d32c9..13d41e260a8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
@@ -1,6 +1,6 @@
 ---
 id: 64a2687ef267e5934a2f93e3
-title: Step 59
+title: Passo 59
 challengeType: 0
 dashedName: step-59
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md
index 9bc32789966..94f5c901bd7 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md
@@ -1,6 +1,6 @@
 ---
 id: 64a26ac5540c5493f4641f10
-title: Step 60
+title: Passo 60
 challengeType: 0
 dashedName: step-60
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md
index f1850a002ff..c979b7b707f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md
@@ -1,6 +1,6 @@
 ---
 id: 64a3bcbc83e574b58c8ed048
-title: Step 70
+title: Passo 70
 challengeType: 0
 dashedName: step-70
 ---
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..80d44f6eef4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -1,83 +1,83 @@
 ---
 id: 6676a8a8d9861319ee901a90
-title: Step 24
+title: Passo 24
 challengeType: 0
 dashedName: step-24
 ---
 
 # --description--
 
-Now you can begin working on your cat's ears.
+Agora, você pode começar a trabalhar nas orelhas do gato.
 
-Clean up your review code by removing the `.cat-right-ear` selector and all of its properties.
+Limpe seu código de revisão removendo o seletor `.cat-right-ear` e todas as suas propriedades.
 
-Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
+Usando um seletor de classe, dê ao elemento `.cat-left-ear` uma borda esquerda e uma borda direita de `35px solid transparent`. Além disso, defina a borda inferior como `70px solid #5e5e5e`.
 
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+O seletor `.cat-right-ear` não deve ter a propriedade `height`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
 ```
 
-Your `.cat-right-ear` selector should not have a `width` property.
+O seletor `.cat-right-ear` não deve ter a propriedade `width`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width)
 ```
 
 
-Your `.cat-right-ear` selector should not have a `border-left` property.
+O seletor `.cat-right-ear` não deve ter uma propriedade `border-left`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft)
 ```
 
-Your `.cat-right-ear` selector should not have a `border-right` property.
+O seletor `.cat-right-ear` não deve ter uma propriedade `border-right`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight)
 ```
 
-Your `.cat-right-ear` selector should not have a `border-top` property.
+O seletor `.cat-right-ear` não deve ter uma propriedade `border-top`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop)
 ```
 
-Your `.cat-right-ear` selector should not have a `border-bottom` property.
+O seletor `.cat-right-ear` não deve ter uma propriedade `border-bottom`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom)
 ```
 
-You should not have a `.cat-right-ear` selector.
+Você não deve ter um seletor `.cat-right-ear`.
 
 ```js
 assert(!new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
-You should have a `.cat-left-ear` selector.
+Você deve ter um seletor `.cat-left-ear`.
 
 ```js 
 assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear'))
 ```
 
-Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent`
+O seletor `.cat-left-ear` deve ter a propriedade `border-left` definida como `35px solid transparent`.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
 ```
 
-Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
+O seletor `.cat-left-ear` deve ter a propriedade `border-right` definida como `35px solid transparent`.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
 ```
 
-Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
+O seletor `.cat-left-ear` deve ter a propriedade `border-bottom` definida como `70px solid #5e5e5e`.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md
index de3f85d469b..1f70c940b5a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md
@@ -1,65 +1,65 @@
 ---
 id: 6676a8b01e56ec1a1e07c202
-title: Step 23
+title: Passo 23
 challengeType: 0
 dashedName: step-23
 ---
 
 # --description--
 
-Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles.
+Observe que agora você tem um quadrado branco com bordas grossas. As bordas têm arestas diagonais que podem ser usadas para criar triângulos.
 
-Within the same class selector adjust `height` and `width` to `0`. Set the left, right and top border to `transparent`.
+Dentro do mesmo seletor de classe, ajuste `height` e `width` para `0`. Define as bordas da esquerda, direita e superior como `transparent`.
 
-Remove the `background-color` property, and you should see a triangle.
+Remova a propriedade `background-color` e você deve ver um triângulo.
 
 # --hints--
 
 
-You should have a `.cat-right-ear` selector.
+Você deve ter um seletor `.cat-right-ear`.
 
 ```js
 assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
-Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `height` definida como `0`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
 ```
 
-Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `width` definida como `0`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
 ```
 
-Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-left` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
 ```
 
-Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-right` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
 ```
 
-Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-top` definida como `35px solid transparent`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
 ```
 
 
-Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
+O seletor `.cat-right-ear` deve ter a propriedade `border-bottom` definida como `35px solid red`. Não se esqueça de adicionar um ponto-e-vírgula.
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
 ```
 
-Your `.cat-right-ear` selector should not have a `background-color` property.
+O seletor `.cat-right-ear` não deve ter uma propriedade `background-color`.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index cfa36296669..621d9c8d266 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index 226e5b20c13..31c7ae3bef6 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index c892a251625..9b6dfdcb2f9 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index 41cb0116ef4..7635f7f639a 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index c48e08bde3a..d3127363127 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 02864b8eb3c..24ca6f17598 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 220b8f1910c..a227a8ad247 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index e1e4edf2a5d..47bd06bb3b4 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index f9c44371025..21046d9dfa4 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index 8e79cc0f875..a68463abafc 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index c033348e650..2c371786294 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index 976c648dcea..8a9bea541d2 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index ad928078bf6..4651ab3a5eb 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 876a559bba6..f84e00dbe23 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index aa5062111f4..4e66ce4d88f 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 510db78130a..e520cee669a 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index 8e7e240f5ab..b0c9f0836c9 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index ed0aa5a867c..45cca9b28df 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ A função `getCaloriesFromInputs` definirá a flag de erro global como `true` s
 
 # --hints--
 
-A função `calculateCalories` deve ter uma instrução `if`.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-A instrução `if` deve verificar se a variável `isError` é considerada verdadeira.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ A instrução `if` deve usar `return` para terminar a execução da função.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/portuguese/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index 94fb146dd4b..ef57baf6975 100644
--- a/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/swahili/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 53c78f64ffe..131eb607061 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Complete the `Category` class. It should be able to instantiate objects based on different budget categories like *food*, *clothing*, and *entertainment*. When objects are created, they are passed in the name of the category. The class should have an instance variable called `ledger` that is a list. The class should also contain the following methods:
 
-- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{"amount": amount, "description": description}`.
+- A `deposit` method that accepts an amount and description. If no description is given, it should default to an empty string. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - A `withdraw` method that is similar to the `deposit` method, but the amount passed in should be stored in the ledger as a negative number. If there are not enough funds, nothing should be added to the ledger. This method should return `True` if the withdrawal took place, and `False` otherwise.
 - A `get_balance` method that returns the current balance of the budget category based on the deposits and withdrawals that have occurred.
-- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description "Transfer to [Destination Budget Category]". The method should then add a deposit to the other budget category with the amount and the description "Transfer from [Source Budget Category]". If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
+- A `transfer` method that accepts an amount and another budget category as arguments. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. If there are not enough funds, nothing should be added to either ledgers. This method should return `True` if the transfer took place, and `False` otherwise.
 - A `check_funds` method that accepts an amount as an argument. It returns `False` if the amount is greater than the balance of the budget category and returns `True` otherwise. This method should be used by both the `withdraw` method and `transfer` method.
 
 When the budget object is printed it should display:
@@ -25,11 +25,11 @@ When the budget object is printed it should display:
 Here is an example usage:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Besides the `Category` class, create a function (outside of the class) called `create_spend_chart` that takes a list of categories as an argument. It should return a string that is a bar chart.
 
-The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The "bars" in the bar chart should be made out of the "o" character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says "Percentage spent by category".
+The chart should show the percentage spent in each category passed in to the function. The percentage spent should be calculated only with withdrawals and not with deposits. Down the left side of the chart should be labels 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. The height of each bar should be rounded down to the nearest 10. The horizontal line below the bars should go two spaces past the final bar. Each category name should be written vertically below the bar. There should be a title at the top that says 'Percentage spent by category'.
 
 This function will be tested with up to four categories.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Calling `food.deposit(900, "deposit")` and `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` should return a balance of `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index b49581bf018..ee429bb945e 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{"red": 2, "blue": 1}`, `contents` should be `["red", "red", "blue"]`.
+A hat will always be created with at least one ball. The arguments passed into the hat object upon creation should be converted to a `contents` instance variable. `contents` should be a list of strings containing one item for each ball in the hat. Each item in the list should be a color name representing a single ball of that color. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 The `Hat` class should have a `draw` method that accepts an argument indicating the number of balls to draw from the hat. This method should remove balls at random from `contents` and return those balls as a list of strings. The balls should not go back into the hat during the draw, similar to an urn experiment without replacement. If the number of balls to draw exceeds the available quantity, return all the balls.
 
 Next, create an `experiment` function in `main.py` (not inside the `Hat` class). This function should accept the following arguments:
 
 - `hat`: A hat object containing balls that should be copied inside the function.
-- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`.
+- `expected_balls`: An object indicating the exact group of balls to attempt to draw from the hat for the experiment. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: The number of balls to draw out of the hat in each experiment.
 - `num_experiments`: The number of experiments to perform. (The more experiments performed, the more accurate the approximate probability will be.)
 
@@ -40,7 +40,7 @@ Here is how you would call the `experiment` function based on the example above
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index f59df1e48f3..b4eadccb6e0 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Use the `print()` function to print the string `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 7f6f60d1c4d..d3988ca160c 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-At this point, the `numbers` list has been sorted. Call the `print` function to print string `Sorted array:` and the sorted list.
+At this point, the `numbers` list has been sorted. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 To do that, concatenate `'Sorted array: '` and `str(numbers)` in the `print()` call.
 
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 289c306da64..328ba82fa16 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and return the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
+Within the `filter_expenses_by_category` function, replace `pass` with a `lambda` function. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-You should create a `lambda` function that uses a parameter named `expense` and returns the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 3a170ab75b6..5fdabe45618 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 Ndani ya kipengele cha pili cha `section`, ongeza vipengele viwili vya `div` vyenye class ya `question-block`.
 
-Kisha, ndani ya kila kipengele cha `div.question-block`, ongeza kipengele kimoja cha `p` chenye maandishi ya nambari zinazoongezeka, kuanzia `1` na kipengele kimoja cha `fieldset` chenye xlass ya `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ Unapaswa kukipa kipengele kipya cha pili cha `div` darasa la `question-block`.
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-Unapaswa kuweka kipengele kimoja cha `p` ndani ya kila kipengele cha `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-Unapaswa kukipa kipengele cha kwanza cha `p` maandishi ya `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-Unapaswa kukipa kipengele cha pili cha `p` maandishi ya `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 Unapaswa kuweka kipengele kimoja cha `fieldset` ndani ya kila kipengele cha `div.question-block`.
@@ -55,16 +55,16 @@ Unapaswa kuweka kipengele kimoja cha `fieldset` ndani ya kila kipengele cha `div
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-Unapaswa kuweka kipengele cha kwanza cha `fieldset` baada ya kipengele cha kwanza cha `p`.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-Unapaswa kuweka kipengele cha pili cha `fieldset` baada ya kipengele cha pili cha `p`.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 Unapaswa kukipa kipengele cha kwanza cha `fieldset` darasa la `question`.
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index fde6b0252b0..55a75420425 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 406cf86eb29..295f86deb2d 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 56bb068dc9e..3da2b2d7a58 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index 8cf26615e59..f20010662e3 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index b8b696d62b0..1bb5166f6f6 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index a1de56b5b24..f724de4d4ac 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index c0ea79195ef..22604b6df18 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index 98fbc63e34e..157e759fe00 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index e310559918f..61d7c87eeef 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index d95eb5b1f24..0824975c84e 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index e26c2ee1f0e..6bdda473206 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index c3f035230c1..40f1f8f99d2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index 14a5e22c662..b483b097f9e 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index a9c260b9560..c1afe1b462f 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index bf4d926f296..c399689bc8d 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index 3a4e436ca64..bc0282e79fd 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index dd8fa796f4d..e8e00be138c 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 786c473ed8f..75bd65c24a5 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index e6a60b27fc8..43cba97990c 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index ae41dd179dc..78ebd678d20 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 171819c8fae..31409a43338 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 0c3ea8247b6..ff2bbe82685 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index b1cee443e80..3f832ac7423 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index ce99410a470..70baf9ccba1 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index c599fc7cafe..7f2324f16a0 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index d498c68ef2c..abf862bedaf 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index e4a7bf279d7..351b1554dd0 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index e13a2ffe40f..7261c4c2946 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index b36fbee75df..691363b9d01 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 20d35b7941b..d0688251a9c 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index ada133a8a58..eb49c777905 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 0ac72043fa6..e4dcc934fff 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index ebc467a1e52..825896921e2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index a54ee8544b1..10c0505bae9 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index 4863917bb34..089d4493140 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index e68bb433972..bb950de77d3 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index b05465d4628..7ed25eaf098 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 1c878aff951..730e988f510 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index db51d0b0938..b036a39247e 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index fec2bb76b6a..e0a1ae0fda4 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index 916481f4e07..7e93fbbb719 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 213496aa5a8..e9b3d71eb21 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 73644105183..2db18bef96d 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 `title` ni mojawapo ya vipengele kadhaa vinavyotoa maelezo ya ziada yasiyoonekana kwenye ukurasa wa wavuti, lakini ni muhimu kwa injini za utafutaji au jinsi ukurasa unavyoonyeshwa.
 
-Ndani ya kipengele cha `head`, weka kipengele cha `meta` chenye sifa inayoitwa `charset` iliyowekwa kwa thamani `utf-8` ili kuambia kivinjari jinsi ya kusimba herufi za ukurasa. Kumbuka kuwa vipengele vya `meta` vinajifunga.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 Unapaswa kuwa na tagi ya `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Tagi yako ya `meta` inapaswa kuwa na sifa ya `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Sifa ya `charset` inapaswa kuwa na thamani ya `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index 2e944890139..7f0610ebd25 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Msimbo wako unapaswa kuwa na kipengele cha `link`.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 Hupaswi kubadilisha kipengele chako cha `head` kilichopo. Hakikisha kuwa hukufuta tagi ya kufunga.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-Unapaswa kuwa na kipengele kimoja cha kujifunga cha `link`.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 Kipengele chako cha `link` kinapaswa kuwa ndani ya kipengele chako cha `head`.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 Kipengele chako cha `link` kinafaa kuwa na sifa ya `rel` yenye thamani `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 Kipengele chako cha `link` kinafaa kuwa na sifa ya `href` yenye thamani `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index 3d796edefad..48869d5dd5c 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 Unaweza kutumia kipengele cha `hr` ili kuonyesha kigawanyaji kati ya sehemu za maudhui tofauti.
 
-Kwanza, ongeza kipengele cha `hr` kati ya kipengele cha `p` chenye class ya `established` na `section` ya kwanza. Kumbuka kuwa vipengele vya `hr` vinajifunga.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-Unapaswa kuongeza kipengele cha `hr`. Vipengele vya `hr` vinajifunga.
+Unapaswa kuongeza kipengele cha `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-Hupaswi kubadilisha kipengele chako cha `p` kilicho na class ya `established`.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-Hupaswi kubadilisha kipengele chako cha `main` kilichopo.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-Kipengele chako cha `hr` kinapaswa kuwa kati ya kipengele chako cha `p` na kipengele chako cha `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index fd2fe853ddf..459c44222d6 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ Chini ya kichwa cha `Coffee`, ongeza picha kwa kutumia url `https://cdn.freecode
 
 # --hints--
 
-Unapaswa kuwa na tagi ya `<img>`. Kumbuka kwamba vipengele vya `img` vinajifunga.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-Kipengele chako cha `img` kinafaa kuwa na sifa ya `src` ya `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-Kipengele chako cha `img` kinafaa kuwa na sifa ya `alt` ya `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index d0b3d06b43e..be557d262f1 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-Mabadiliko ya gradient mara nyingi hubadilika polepole kutoka kwa rangi moja hadi nyingine. Unaweza kufanya mabadiliko kuwa laini kama hii:
+Mabadiliko ya gradient mara nyingi hubadilika polepole kutoka kwa rangi moja hadi nyingine. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 26261c4c9b1..96e7b55caae 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Unaweza kuongeza picha kwenye tovuti yako kwa kutumia kipengele cha `img`. Vipengele vya `img` vina tagi inayofungua bila tagi ya kufunga. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+Unaweza kuongeza picha kwenye tovuti yako kwa kutumia kipengele cha `img`. Vipengele vya `img` vina tagi inayofungua bila tagi ya kufunga. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 Ongeza kipengele cha `img` chini ya kipengele cha `p`. Katika hatua hii, hakuna picha itaonyeshwa kwenye kivinjari.
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index cc632b77c48..99ec9f56b48 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 Sifa ya nafasi inayofuata ni `absolute`. Unapotumia thamani ya `absolute` kwa sifa ya `position` yako, kipengele kinatolewa nje ya mtiririko wa kawaida wa hati, na kisha nafasi yake kuamuliwa na sifa za `top`, `right`, `bottom`, na `left`.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index c01b6fdac92..7e78d82537a 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 644230ea84a..13a4244b187 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index e29586aeab4..189627c3d5d 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 72f13bb0659..7e5f09a6132 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
index dd186b53e19..365dae1c57c 100644
--- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
+++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -70,7 +70,7 @@ nav a {
 
 Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`.
 
-Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`.
+Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the background color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the background color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the background color `orange`.
 
 # --hints--
 
@@ -98,22 +98,22 @@ Your mixin should include a `background-color` property that uses the `$bg-color
 assert.match(__helpers.removeWhiteSpace(code), /background-color:\$bg\-color;/gi);
 ```
 
-You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`.
+You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the background color `red`.
 
 ```js
-assert.match(code, /#square\s*{\s*@include\s+shape\(\s*50px,\s*50px,\s*red\s*\)\s*;\s*}/gi);
+assert.match(code, /#square\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*50px\s*,\s*red\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`.
+You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the background color `blue`.
 
 ```js
-assert.match(code, /#rect-a\s*{\s*@include\s+shape\(\s*100px,\s*50px,\s*blue\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-a\s*{\s*@include\s+shape\s*\(\s*100px\s*,\s*50px\s*,\s*blue\s*\)\s*;\s*}/gi);
 ```
 
-You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`.
+You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the background color `orange`.
 
 ```js
-assert.match(code, /#rect-b\s*{\s*@include\s+shape\(\s*50px,\s*100px,\s*orange\s*\)\s*;\s*}/gi);
+assert.match(code, /#rect-b\s*{\s*@include\s+shape\s*\(\s*50px\s*,\s*100px\s*,\s*orange\s*\)\s*;\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 210e77dcc04..063a90854a7 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -10,10 +10,10 @@ dashedName: build-a-budget-app-project
 
 Завершіть клас `Category`. Він повинен опрацьовувати об’єкти, базуючись на різних категоріях (наприклад, *їжа*, *одяг* та *розваги*). Під час створення об’єктів до них передається назва категорії. Клас повинен мати змінну-екземпляр під назвою `ledger`, що є списком. Клас також повинен містити наступні методи:
 
-- Метод `deposit`, що приймає суму та опис. Якщо жодного опису не дано, то він автоматично стає порожнім рядком. Цей метод повинен додавати об’єкти до списку головної книги у вигляді `{"amount": amount, "description": description}`.
+- Метод `deposit`, що приймає суму та опис. Якщо жодного опису не дано, то він автоматично стає порожнім рядком. The method should append an object to the ledger list in the form of `{'amount': amount, 'description': description}`.
 - Метод `withdraw` схожий до методу `deposit`, але сума, яку він передає, має зберігатися у головній книзі як від’ємне число. Якщо недостатньо коштів, то до головної книги нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо зняття дійсне, а в іншому випадку повертати `False`.
 - Метод `get_balance`, що повертає поточний баланс категорії бюджету на основі депозитів і зняття.
-- Метод `transfer`, що приймає суму або іншу бюджетну категорію як аргументи. Цей метод повинен додавати виведення суми та опис «Transfer to [Destination Budget Category]». Потім він повинен додати депозит до іншої категорії, що містить суму та опис «Transfer from [Source Budget Category]». Якщо коштів недостатньо, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо переказ дійсний, а в іншому випадку — повертати `False`.
+- Метод `transfer`, що приймає суму або іншу бюджетну категорію як аргументи. The method should add a withdrawal with the amount and the description 'Transfer to [Destination Budget Category]'. The method should then add a deposit to the other budget category with the amount and the description 'Transfer from [Source Budget Category]'. Якщо коштів недостатньо, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо переказ дійсний, а в іншому випадку — повертати `False`.
 - Метод `check_funds`, що приймає суму як аргумент. Він повертає `False`, якщо сума більша за баланс бюджетної категорії, а в іншому випадку повертає `True`. Цей метод мають використовувати методи `withdraw` та `transfer`.
 
 Якщо бюджет надрукований, то повинні відображатися:
@@ -25,11 +25,11 @@ dashedName: build-a-budget-app-project
 Ось приклад використання:
 
 ```py
-food = Category("Food")
-food.deposit(1000, "deposit")
-food.withdraw(10.15, "groceries")
-food.withdraw(15.89, "restaurant and more food for dessert")
-clothing = Category("Clothing")
+food = Category('Food')
+food.deposit(1000, 'deposit')
+food.withdraw(10.15, 'groceries')
+food.withdraw(15.89, 'restaurant and more food for dessert')
+clothing = Category('Clothing')
 food.transfer(50, clothing)
 print(food)
 ```
@@ -47,7 +47,7 @@ Total: 923.96
 
 Окрім класу `Category`, створіть функцію під назвою `create_spend_chart` (за межами класу), яка приймає список категорій як аргумент. Вона повинна повертати рядок зі стовпчиковою діаграмою.
 
-Діаграма повинна показувати відсотки, витрачені в кожній категорії, переданій до функції. Відсоток витраченого повинен бути розрахований лише за рахунок зняття, але не з депозитів. Внизу лівої частини діаграми мають бути мітки 0 - 100. Стовпчики у стовпчиковій діаграмі повинні бути створені із символу «o». Висота кожного стовпчика має бути округлена до найближчого десятка. Горизонтальна лінія під стовпчиками має розташовуватись в двох пробілах від кінцевого стовпчика. Назва кожної категорії повинна бути написана вертикально під стовпчиком. Вгорі повинен бути заголовок «Percentage spent by category».
+Діаграма повинна показувати відсотки, витрачені в кожній категорії, переданій до функції. Відсоток витраченого повинен бути розрахований лише за рахунок зняття, але не з депозитів. Внизу лівої частини діаграми мають бути мітки 0 - 100. The 'bars' in the bar chart should be made out of the 'o' character. Висота кожного стовпчика має бути округлена до найближчого десятка. Горизонтальна лінія під стовпчиками має розташовуватись в двох пробілах від кінцевого стовпчика. Назва кожної категорії повинна бути написана вертикально під стовпчиком. There should be a title at the top that says 'Percentage spent by category'.
 
 Ця функція буде тестуватися з максимум чотирма категоріями.
 
@@ -272,7 +272,7 @@ t.result.wasSuccessful()
 })
 ```
 
-Виклик `food.deposit(900, "deposit")` та `food.withdraw(45.67, "milk, cereal, eggs, bacon, bread")` має повернути баланс `854.33`.
+Calling `food.deposit(900, 'deposit')` and `food.withdraw(45.67, 'milk, cereal, eggs, bacon, bread')` should return a balance of `854.33`.
 
 ```js
 ({
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
index 7a66dcfbb63..dde1430067a 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/build-a-probability-calculator-project/probability-calculator.md
@@ -20,14 +20,14 @@ hat2 = Hat(red=5, orange=4)
 hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```
 
-Капелюх завжди створюється з принаймні однією кулькою. Аргументи, які передаються в об’єкт-капелюх, під час створення мають конвертуватися в змінну-екземпляр `contents`. `contents` має бути списком рядків, де один елемент дорівнює кожній кульці у капелюсі. Кожен елемент списку має бути назвою кольору, що позначає кульку певного кольору. Наприклад, якщо капелюх `{"red": 2, "blue": 1}`, то `contents` має бути `["red", "red", "blue"]`.
+Капелюх завжди створюється з принаймні однією кулькою. Аргументи, які передаються в об’єкт-капелюх, під час створення мають конвертуватися в змінну-екземпляр `contents`. `contents` має бути списком рядків, де один елемент дорівнює кожній кульці у капелюсі. Кожен елемент списку має бути назвою кольору, що позначає кульку певного кольору. For example, if your hat is `{'red': 2, 'blue': 1}`, `contents` should be `['red', 'red', 'blue']`.
 
 Клас `Hat` повинен мати метод `draw`, який приймає аргумент з позначенням кількості кульок, які можна витягти з капелюха. Цей метод має випадково витягати кульки з `contents` та повертати ці кульки у вигляді списку рядків. Кульки не повинні повертатися до капелюха після того, як їх витягли (як в експерименті з урною без заміни). Якщо кількість кульок, які треба витягти, перевищує доступну кількість, поверніть усі кульки.
 
 Потім створіть функцію `experiment` в `main.py` (не в класі `Hat`). Ця функція повинна приймати наступні аргументи:
 
 - `hat`: об’єкт-капелюх з кульками, що потрібно скопіювати у функцію.
-- `expected_balls`: об’єкт, який вказує на точну кількість кульок, які треба вийняти з капелюха для експерименту. Наприклад, щоб визначити вірогідність того, що ви витягнете 2 сині та 1 червону кульки з капелюха, встановіть `expected_balls` на `{"blue":2, "red":1}`.
+- `expected_balls`: об’єкт, який вказує на точну кількість кульок, які треба вийняти з капелюха для експерименту. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{'blue':2, 'red':1}`.
 - `num_balls_drawn`: кількість кульок, які треба витягти з капелюха в кожному експерименті.
 - `num_experiments`: кількість експериментів, які треба провести. (Чим більше експериментів було проведено, тим точнішою буде вірогідність.)
 
@@ -40,7 +40,7 @@ hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 ```py
 hat = Hat(black=6, red=4, green=3)
 probability = experiment(hat=hat,
-                  expected_balls={"red":2,"green":1},
+                  expected_balls={'red':2,'green':1},
                   num_balls_drawn=5,
                   num_experiments=2000)
 ```
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
index bbd725eec8b..1736f0eecf1 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c05b9166f9d5bb36c09e.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-Використайте функцію `print()`, щоб надрукувати рядок `Unsorted array:`.
+Use the `print()` function to print the string `'Unsorted array:'`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
index 2509697a4f1..23765c04411 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-data-structures-by-building-the-merge-sort-algorithm/6569c2cbf6c993ea8cd85682.md
@@ -7,7 +7,7 @@ dashedName: step-33
 
 # --description--
 
-На цьому етапі список `numbers` відсортовано. Викличте функцію `print`, щоб надрукувати рядок `Sorted array:` та відсортований список.
+На цьому етапі список `numbers` відсортовано. Call the `print` function to print string `'Sorted array: '` and the sorted list.
 
 Для цього об’єднайте `'Sorted array: '` та `str(numbers)` у виклику `print()`.
 
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
index 4670d117803..896ef65a2c0 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/learn-lambda-functions-by-building-an-expense-tracker/65823ff0d4b991510fade1a8.md
@@ -7,11 +7,11 @@ dashedName: step-21
 
 # --description--
 
-Замініть `pass` на функцію `lambda` в межах функції `filter_expenses_by_category`. Використайте `expense` як параметр і поверніть порівняння між значенням ключа `'category'` словника `expense` та `category`, використовуючи оператор порівняння.
+Замініть `pass` на функцію `lambda` в межах функції `filter_expenses_by_category`. Use `expense` as the parameter and evaluate the comparison between the value of the `'category'` key of the `expense` dictionary and `category` using the equality operator.
 
 # --hints--
 
-Створіть функцію `lambda` в межах функції `filter_expenses_by_category`, яка використовує параметр під назвою `expense` та повертає вираз `expense['category'] == category`.
+You should create a `lambda` function that uses a parameter named `expense` and evaluates the expression `expense['category'] == category` inside the `filter_expenses_by_category` function.
 
 ```js
 ({ test: () => assert(runPython(`_Node(_code).find_function("filter_expenses_by_category").has_stmt("lambda expense: expense['category'] == category")`)) })
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
index 89dbb5da743..d9ad6b61e52 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -9,7 +9,7 @@ dashedName: step-26
 
 В межах другого елемента `section` додайте два елементи `div` класу `question-block`.
 
-Потім в межах кожного елемента `div.question-block` додайте один елемент `p` з текстом зростання чисел, починаючи з `1`, та один елемент `fieldset` з класом `question`.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
@@ -31,22 +31,22 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.cla
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
 ```
 
-Ви повинні вкласти один елемент `p` в межах кожного елемента `div.question-block`.
+You should nest one `h3` element within each `div.question-block` element.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
 ```
 
-Ви повинні надати першому елементу `p` текст `1`.
+You should give the first `h3` element text of `1`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
 ```
 
-Ви повинні надати другому елементу `p` текст `2`.
+You should give the second `h3` element text of `2`.
 
 ```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
 ```
 
 Ви повинні вкласти один елемент `fieldset` в межах кожного елемента `div.question-block`.
@@ -55,16 +55,16 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
 assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
 ```
 
-Ви повинні розмістити перший елемент `fieldset` після першого елемента `p`.
+You should place the first `fieldset` element after the first `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
 ```
 
-Ви повинні розмістити другий елемент `fieldset` після другого елемента `p`.
+You should place the second `fieldset` element after the second `h3` element.
 
 ```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
 ```
 
 Ви повинні надати першому елементу `fieldset` клас зі значенням `question`.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
index c592eb45d55..48e651e7fcc 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question"></fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question"></fieldset>
           </div>
         </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
index 38c5c9e49f4..102c29bab2d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question">
               <legend></legend>
               <ul>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
index 64bdfe883d8..dddd9ed7b18 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -131,7 +131,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
index ce1583f2c80..00bf59ec7a5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -81,7 +81,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index fc3ec107172..c691d4b1c85 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -171,7 +171,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
index a5f57ee3492..158df415d82 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -104,7 +104,7 @@ assert.notEqual(i(0), i(2));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
index db7bdecd1fe..dc1507567eb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -69,7 +69,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
index a2ede7ac703..cdc92d3466a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -107,7 +107,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
index 63967ff95eb..d347c191f22 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -81,7 +81,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
index ae8ac81dd57..49a26f44b6a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -113,7 +113,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
index d6fa0aec904..d0598210fe0 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -81,7 +81,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
index 74057428a6c..71864413eea 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -87,7 +87,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
index fdb568d4602..2bf4ae25058 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -94,7 +94,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
index a08d28651b7..6a37de3d338 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -88,7 +88,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
index bb951b60e29..a7e64c88bae 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -71,7 +71,7 @@ assert.exists(document.querySelector('footer > address'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
index bfd9e5e292a..37815cc2041 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -72,7 +72,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
index 7efde5a9e84..5d6acb7a22d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -78,7 +78,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 6f1d690014b..33aeb9f5327 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -103,7 +103,7 @@ assert.equal(display, 'block');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index e7ffd50d13f..f2c64fd3e45 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -111,7 +111,7 @@ for (let elem of document.querySelectorAll('li > a')) {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
index 7c3160b1735..0997fef2dd5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -96,7 +96,7 @@ assert.equal(cursor, 'pointer');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index c3438d33394..8d9034c03f2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
index 954322b1cc3..f12ed2cbb73 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -85,7 +85,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
index a360fcec449..ad3456ff641 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -96,7 +96,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
index 996b95aec11..396c8052d6f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
index 5a6f6e297ef..4d631991fad 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -69,7 +69,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 4d55b101020..9e1c3d15ecf 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -87,7 +87,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
index 8668a87c5ec..ff0e31cd64d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -167,7 +167,7 @@ assert.isAtLeast(valInPx, 13);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
index 207ef60b279..a9c3da6e428 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -80,7 +80,7 @@ assert.equal(textAlign, 'left');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
index 9ddeda0e634..a069c4b2ca3 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -80,7 +80,7 @@ assert.equal(minWidth, '55px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
index 34ec9b30d33..2ca358d587e 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -83,7 +83,7 @@ document.querySelectorAll('.info label').forEach(el => {
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ document.querySelectorAll('.info label').forEach(el => {
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
index 18f66f42fcf..c7ec719786c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -101,7 +101,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
index 7cc7201e3ae..fb7ac7b6acd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -87,7 +87,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
index 6ec67f6845e..d2acb7b849c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -77,7 +77,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
index a09cb1e6744..bc84e6b7522 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -83,7 +83,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index ffd03e26efc..33ba9b58625 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -115,7 +115,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
index 7214cb13913..45ec678498b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -81,7 +81,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
index ece1f569ac2..80b3256f4c9 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -95,7 +95,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
index 9552af621da..ee7a8646056 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -93,7 +93,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
index fca66fb8b55..486159af778 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -71,7 +71,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
index dc58e269426..d027d6d6733 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -87,7 +87,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
index a65b687cbf4..6028a5ce73f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -89,7 +89,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
@@ -408,7 +408,7 @@ address {
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
         <div class="question-block">
-          <p>1</p>
+          <h3>1</h3>
           <fieldset class="question" name="html-question-one">
             <legend>
               The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
           </fieldset>
         </div>
         <div class="question-block">
-          <p>2</p>
+          <h3>2</h3>
           <fieldset class="question" name="html-question-two">
             <legend>
               A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
index 93ee3e1a6d9..f9ffb821b6d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
@@ -111,7 +111,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
           <div class="question-block">
-            <p>1</p>
+            <h3>1</h3>
             <fieldset class="question" name="html-question-one">
               <legend>
                 The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
             </fieldset>
           </div>
           <div class="question-block">
-            <p>2</p>
+            <h3>2</h3>
             <fieldset class="question" name="html-question-two">
               <legend>
                 A label element nesting an input element is required to have a
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
index 1ee891bb916..7a89be47a27 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -9,26 +9,32 @@ dashedName: step-3
 
 `title` є одним з елементів, які надають додаткову інформацію, яку не видно на вебсторінці, але є важливою для пошукових систем або для того, як відображається сторінка.
 
-Всередині елемента `head` вкладіть елемент `meta` з атрибутом `charset` зі значенням `utf-8`, щоб повідомити браузеру як кодувати символи сторінки. Зауважте, що елементи `meta` є самозакривними.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 Ви повинні мати теґ `meta`.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Ваш теґ `meta` повинен мати атрибут `charset`.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Ваш атрибут `charset` повинен мати значення `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
index fcf42005eb9..2f0db7d899f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -15,42 +15,48 @@ Now you need to link the `styles.css` file, so the styles will be applied again.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 Ви не повинні змінювати наявний елемент `head`. Переконайтеся, що не видалили кінцевий теґ.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-Ви повинні мати один самозакривний елемент `link`.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 Ваш елемент `link` повинен бути в межах елемента `head`.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 Ваш елемент `link` повинен містити атрибут `rel` зі значенням `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 Ваш елемент `link` повинен містити атрибут `href` зі значенням `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index b322d7c8541..dcb848b5c95 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -9,34 +9,42 @@ dashedName: step-66
 
 Елемент `hr` можна використовувати для відображення дільника між секціями різного вмісту.
 
-Спочатку додайте елемент `hr` між елементом `p` з класом `established` та першим елементом `section`. Зауважте, що елементи `hr` є самозакривними.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-Ви повинні додати елемент `hr`. Елементи `hr` є самозакривними.
+Ви повинні додати елемент `hr`.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
 ```
 
-Ви не повинні змінювати наявний елемент `p` з класом `established`.
+The `hr` element is a void element, it should not have an end tag `</hr>`.
 
 ```js
-assert($('p.established').length === 1);
+assert.notMatch(code, /<\/hr>/i);
 ```
 
-Ви не повинні змінювати наявний елемент `main`.
+You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('main').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
-Ваш елемент `hr` повинен бути між елементами `p` та `section`.
+You should not change your existing `main` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
+```
+
+Your `hr` element should be between your `p` element and your `section` element.
+
+```js
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
index 4fc4b91b17b..99ff7d37395 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -13,22 +13,31 @@ dashedName: step-88
 
 # --hints--
 
-Ви повинні мати теґ `<img>`. Пам'ятайте, що елементи `img` є самозакривними.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-Ваш елемент `img` повинен мати атрибут `src` зі значенням `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-Ваш елемент `img` повинен мати атрибут `alt` зі значенням `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
index 21998605a83..7b1fec40ded 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -7,7 +7,7 @@ dashedName: step-51
 
 # --description--
 
-Градієнтні переходи часто поступово змінюються з одного кольору на інший. Ви можете зробити суцільну лінію, ось так:
+Градієнтні переходи часто поступово змінюються з одного кольору на інший. When a more abrupt change is required, the transition can be made with a hard stop like this:
 
 ```css
 linear-gradient(
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 7e1e454644a..09c0008c71c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Ви можете додати зображення до свого сайту з допомогою елемента `img`. Елементи `img` мають початковий теґ без кінцевого теґа. A tag for an element without a closing tag is known as a <dfn>void element</dfn>.
+Ви можете додати зображення до свого сайту з допомогою елемента `img`. Елементи `img` мають початковий теґ без кінцевого теґа. An element without a closing tag is known as a <dfn>void element</dfn>.
 
 Додайте елемент `img` під елементом `p`. На цю мить жодне зображення не буде відображатися в браузері.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index a6bc395ad35..3af6beeb221 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -11,7 +11,7 @@ Now you will learn a CSS trick to draw triangles.
 
 This will be used to draw ears on the cat.
 
-Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
index 894ae0d13a1..eb0aea12bc5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476f7a4827bcc61682f2347.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 Наступна властивість позиціювання — це `absolute`. Коли ви використовуєте значення `absolute` для властивості `position`, то елемент виймається з нормального потоку документа, а його позиціювання визначається властивостями `top`, `right`, `bottom` та `left`.
 
-Set the position property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
+Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
 
 <!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
index 97c2bd562fb..4d920f5cc8b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
@@ -16,7 +16,7 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
 # --hints--
 
 
-Your `.cat-right-ear` selector not should have a `height` property.
+Your `.cat-right-ear` selector should not have a `height` property.
 
 ```js
 assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
index b030cec1fce..619bf72c8d2 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655485321913feabbc5f00f8.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
index ce7bf7f4b2f..0cc6a15fd0e 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555d458687cb3b357834df9.md
@@ -657,7 +657,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
index 898f6ec2d06..13ea8711659 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555dd138e70cae6b546966d.md
@@ -654,7 +654,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
index ed9c0b940de..33c70e16516 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555de565387a2efe90a6ccc.md
@@ -662,7 +662,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
index 69b56cbdc2e..a4315a1aea1 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e04aeb225bfbae237344.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
index 0fdbc11d3da..58cc51c9f19 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e0bfe4d69904410f7cd3.md
@@ -661,7 +661,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
index 017038df5b1..229bd67f64e 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e57d3e6d9d221c4735be.md
@@ -651,7 +651,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
index cf488e34f4b..d1457a8c3e7 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6555e6cec786da2aadc11ea0.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
index 4947724b5d6..c6f4387e112 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572399a8e16d50bc2c1ff3.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
index f71d9047700..9f1dd78615b 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655724bac464795a0ad91082.md
@@ -643,7 +643,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
index 4728fe6965a..7da322620be 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655729e68e49b277a6b448bd.md
@@ -11,7 +11,7 @@ Now that you've created the `resetButton`, you need to assign it an `id` and `ar
 
 For example, `element.id` would set an `id` attribute, and `element.ariaLabel` would set an `aria-label` attribute. Both of them accept their values as a string.
 
-Set the `id` attribute of `resetButton` to `"reset"` and its `"aria-label"` attribute to `"Reset playlist"`.
+Set the `id` attribute of the `resetButton` element to `"reset"` and its `aria-label` attribute to `"Reset playlist"`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
index e9360d8add4..825137685ac 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572bb34a7e488224b937fc.md
@@ -671,7 +671,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
index cedb5106ec4..d8f3cb71be0 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65572e5aaf022790fb4a81b1.md
@@ -655,7 +655,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
index 4187ab404d6..e15f9177e5a 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573a97c59ddbbf028ca95e.md
@@ -667,7 +667,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
index 17ab3bdd7f4..36972c0a112 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/6557421eb6a7a0f0500e3106.md
@@ -641,7 +641,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
index 14aceb8006a..6389c2cb538 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4c8f636d9675953a0388.md
@@ -624,7 +624,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
index bb8b8090c1c..daad28850f0 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/655b4dad1d38ff7cdd65cbfe.md
@@ -665,7 +665,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
@@ -1451,7 +1451,7 @@ const playNextSong = () => {
   }
 };
 
-const playPreviousSong = () =>{
+const playPreviousSong = () => {
    if (userData?.currentSong === null) return;
    else {
     const currentSongIndex = getCurrentSongIndex();
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
index db04fc12f89..0a6619e6ffc 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e45519caf31b987fbb5f.md
@@ -11,13 +11,7 @@ Your `getCaloriesFromInputs` function will set the global error flag to `true` i
 
 # --hints--
 
-Your `calculateCalories` function should have an `if` statement.
-
-```js
-assert.match(calculateCalories.toString(), /if\s*\(/);
-```
-
-Your `if` statement should check the truthiness of the `isError` variable.
+Your `calculateCalories` function should have an `if` statement that checks the truthiness of the `isError` variable.
 
 ```js
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
@@ -29,6 +23,12 @@ Your `if` statement should use `return` to end the function execution.
 assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*/);
 ```
 
+Your `if` statement should be placed after the last `getCaloriesFromInputs` function call.
+
+```js
+assert.match(code, /if\s*\(\s*isError\s*\)\s*\{?\s*return\s*;?\s*\}?\s*\}\s*function\s+/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
new file mode 100644
index 00000000000..84fa81be0c8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 6571b2fccc1de61d7b4dd37f
+title: Introduction to Flexbox Lesson A
+challengeType: 15
+dashedName: introduction-flexbox-lesson-a
+---
+
+# --description--
+
+## Before we get started
+
+Flexbox layouts can get a little complicated. In a previous lesson, you learned how to inspect and debug things using your browser’s developer tools. Those tools will be crucial for you in the following lessons. If something isn’t behaving the way you expect, inspecting it in the developer tools should be your first step every time.
+
+Flexbox isn’t necessarily any more difficult than the other concepts that we’ve covered so far, but it does have a few more moving parts. It is going to be somewhat difficult to make use of any of the things you’re learning in these first lessons until you get to the end and can put it all together. As we go, do yourself a favor and <strong>play with all of the code examples.</strong>
+
+You will almost definitely need to come back and reference these lessons (or a couple of the resources we share with you) when you get to the assignments at the end of the section, but if you take your time and experiment with all the code examples we provide, you’ll know better where to look when that time comes.
+
+## Let’s flex
+
+Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define. To get started, let’s look at a simple demonstration.
+
+> We’ve embedded a lot of interactive examples in these lessons. Take your time to experiment with them as you go to cement the concepts in your mind!
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy"></iframe>
+
+We’ll get into exactly what’s going on here soon enough. But for now, let’s uncomment the two flex related CSS declarations in the above Codepen by removing the `/*` and `*/` tags surrounding them, then check out the result.
+
+> Comments prevent the browser from interpreting lines as code, and are wrapped between specific tags. CSS uses `/*` as an opening comment tag and `*/` as a closing comment tag, while HTML and JavaScript have their own syntax. Commented out lines of code can be re-enabled simply by removing the comment tags surrounding the code.
+
+All 3 divs should now be arranged horizontally. If you resize the results frame with the `1x`, `.5x` and `.25x` buttons you’ll also see that the `div` elements will "flex". They will fill the available area and will each have equal width.
+
+If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
+
+> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
+
+# --question--
+
+## --text--
+
+What happens when the two flex related CSS declarations in the CodePen are uncommented?
+
+## --answers--
+
+The `div` elements become hidden from view, losing their visibility within the container.
+
+---
+
+All 3 `div` elements are arranged horizontally, and they flex to fill the available area with equal width.
+
+---
+
+Each `div` element enlarges and covers the entire container, overlapping each other.
+
+---
+
+The `div` elements align vertically in a single column, ignoring the flex-related CSS declarations.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
new file mode 100644
index 00000000000..822207e3678
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-b.md
@@ -0,0 +1,40 @@
+---
+id: 6571b2fecc1de61d7b4dd380
+title: Introduction to Flexbox Lesson B
+challengeType: 15
+dashedName: introduction-flexbox-lesson-b
+---
+
+# --description--
+
+As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container, while some go on the flex items. This is a simple yet important concept.
+
+A flex container is any element that has `display: flex` on it. A flex item is any element that lives directly inside of a flex container.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-01.png" style="width: 95%; height: 95%;" alt="An outer rectangle representing a flex container encompassing three smaller inner rectangles lined up side by side, each representing a flex item." />
+
+# --question--
+
+## --text--
+
+What’s the difference between a flex container and a flex item?
+
+## --answers--
+
+Flex containers are elements with `display: flex`, while flex items are elements within flex containers.
+
+---
+
+Flex containers are elements within flex items, while flex items define the overall layout.
+
+---
+
+Flex containers are elements using flexbox, and flex items are inline elements.
+
+---
+
+Flex containers are elements that define the layout structure, while flex items control the overall page design.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
new file mode 100644
index 00000000000..1bf56cd2bbc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-c.md
@@ -0,0 +1,44 @@
+---
+id: 6571b2fecc1de61d7b4dd381
+title: Introduction to Flexbox Lesson C
+challengeType: 15
+dashedName: introduction-flexbox-lesson-c
+---
+
+# --description--
+
+Somewhat confusingly, any element can be both a flex container and a flex item. Said another way, you can also put `display: flex` on a flex item and then use flexbox to arrange its children.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="a flex container that has multiple flex items, within those flex items are nested flex items as well. Making the parent of those nested flex items also a flex container." />
+
+Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="a complex layout of flex items and flex containers. There are multiple flex containers nested into each other, thus making them flex items as well" />
+
+Certainly, the image features a representation of a CSS Flexbox layout with nested flex containers. The outer container is denoted as "ALSO a flex container" highlighted in blue, and within it is another container marked as "with flex items" in red. Inside the red container, there are three items labeled as "flex items" in peach. This demonstrates that a flex container can be nested within another flex container and contain its own flex items, showcasing the recursive nature of Flexbox layout structures.
+
+# --question--
+
+## --text--
+
+Which CSS property is applied to elements to make them flex containers?
+
+## --answers--
+
+`align-items`
+
+---
+
+`display: flex`
+
+---
+
+`justify-content`
+
+---
+
+`flex`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
new file mode 100644
index 00000000000..f7e458c52d3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6571b2ffcc1de61d7b4dd382
+title: Introduction to Flexbox Lesson D
+challengeType: 15
+dashedName: introduction-flexbox-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding of how flexbox works, what is the primairy role of a flex item in a `flexbox` layout? Try and answer the question below.
+
+# --question--
+
+## --text--
+
+What role does a flex item play within a flex container?
+
+## --answers--
+
+Flex items define the overall layout structure.
+
+---
+
+Flex items set the background colors of flex containers.
+
+---
+
+Flex items allow the flex container to resize based on content.
+
+---
+
+Flex items are elements that reside directly within a flex container.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
new file mode 100644
index 00000000000..d498dc9ca1d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 6571b300cc1de61d7b4dd383
+title: Introduction to Flexbox Lesson E
+challengeType: 15
+dashedName: introduction-flexbox-lesson-e
+---
+
+# --description--
+
+The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
+
+> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
+
+In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-04.png" alt="CSS code setting the flex property to 1 for a div element." />
+
+In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
+
+Very often, you see the flex shorthand defined with only one value. In that case, that value is applied to `flex-grow`. So when you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
+
+# --question--
+
+## --text--
+
+Which properties are set by the `flex` shorthand?
+
+## --answers--
+
+`flex-grow`, `flex-shrink`, and `flex`
+
+---
+
+`flex-basis`, `flex-wrap`, and `flex-direction`
+
+---
+
+`flex-grow`, `flex-shrink`, and `flex-basis`
+
+---
+
+`flex-direction`, `flex`, and `flex-wrap`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
new file mode 100644
index 00000000000..4eaf7c90e6a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-f.md
@@ -0,0 +1,40 @@
+---
+id: 6571b300cc1de61d7b4dd384
+title: Introduction to Flexbox Lesson F
+challengeType: 15
+dashedName: introduction-flexbox-lesson-f
+---
+
+# --description--
+
+`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.
+
+In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=YzQqvgK&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
+
+# --question--
+
+## --text--
+
+What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
+
+## --answers--
+
+The container will shrink to accommodate the larger div.
+
+---
+
+All divs will retain the same size due to conflicting `flex` values.
+
+---
+
+The specific div will grow to be twice the size of the others.
+
+---
+
+All divs will shrink equally to adjust to the new `flex` values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
new file mode 100644
index 00000000000..ec641fb8038
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34568e4b3b17d3957f8
+title: Introduction to Flexbox Lesson G
+challengeType: 15
+dashedName: introduction-flexbox-lesson-g
+---
+
+# --description--
+
+`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+
+The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+
+Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+
+An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+
+# --question--
+
+## --text--
+
+What is the default behavior of `flex-shrink` when applied to flex items?
+
+## --answers--
+
+It prevents any item from shrinking.
+
+---
+
+It makes all items shrink at an equal rate.
+
+---
+
+It causes only specific items to shrink.
+
+---
+
+It enlarges the items' sizes equally.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
new file mode 100644
index 00000000000..7f370e28917
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-h.md
@@ -0,0 +1,41 @@
+---
+id: 6571c34668e4b3b17d3957f9
+title: Introduction to Flexbox Lesson H
+challengeType: 15
+dashedName: introduction-flexbox-lesson-h
+---
+
+# --description--
+
+No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
+
+In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+# --question--
+
+## --text--
+
+Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
+
+## --answers--
+
+`align-items`
+
+---
+
+`flex-flow`
+
+---
+
+`flex-direction`
+
+---
+
+`justify-content`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
new file mode 100644
index 00000000000..af3b6bc7af9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-i.md
@@ -0,0 +1,45 @@
+---
+id: 6571c34768e4b3b17d3957fa
+title: Introduction to Flexbox Lesson I
+challengeType: 15
+dashedName: introduction-flexbox-lesson-i
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=BaZKPdw&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
+
+One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
+
+The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
+
+The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
+
+Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
+
+# --question--
+
+## --text--
+
+Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
+
+## --answers--
+
+The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
+
+---
+
+The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
+
+---
+
+`flex: 1` only works in a row-based layout, not in a column-based one.
+
+---
+
+The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
new file mode 100644
index 00000000000..d2ad72a1ea2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-j.md
@@ -0,0 +1,52 @@
+---
+id: 6571c34868e4b3b17d3957fb
+title: Introduction to Flexbox Lesson J
+challengeType: 15
+dashedName: introduction-flexbox-lesson-j
+---
+
+# --description--
+
+Let's look at an example.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
+
+Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
+
+Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-05.png" alt="Three small boxes within a much larger rectangle. The boxes are arranged in a single row, one close to the left edge of the container, one close to the right edge of the container, and the last directly in the middle of the container, placing as much space as possible between each box." />
+
+`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
+
+## --text--
+
+How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
+
+## --answers--
+
+It evenly distributes space between items, pushing the first and last items to the edges.
+
+---
+
+It centers all items within the container.
+
+---
+
+It causes the items to grow to fill available space.
+
+---
+
+It aligns items to the left side while leaving excessive space on the right side.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
new file mode 100644
index 00000000000..d3137b0af56
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-k.md
@@ -0,0 +1,48 @@
+---
+id: 6597b43d854b3fa8e35d66d7
+title: Introduction to Flexbox Lesson K
+challengeType: 15
+dashedName: introduction-flexbox-lesson-k
+---
+
+# --description--
+
+<iframe allowfullscreen="true" allowpaymentrequest="true"
+style="width: 100%; overflow:hidden; display:block;"
+allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=MWoyBzR&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
+
+To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-06.png" alt="three blue squares centered in the middle of the flex container" style="margin: 15px 0" />
+
+Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
+
+# --question--
+
+## --assignment--
+
+Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
+
+## --text--
+
+When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
+
+## --answers--
+
+It distributes space between items evenly.
+
+---
+
+It aligns items horizontally along the main axis.
+
+---
+
+It centers items vertically along the cross axis.
+
+---
+
+It aligns items to the start of the container along the cross axis.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
new file mode 100644
index 00000000000..d7f18cd25b4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-a.md
@@ -0,0 +1,44 @@
+---
+id: 661e27508602567c118451d1
+title: Learn Arrays and Loops Lesson A
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-a
+---
+
+# --description--
+
+Strings and numbers may be our building blocks, but as your scripts get more complex, you're going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).
+
+Arrays are a way to store multiple values in a single variable. They are a special type of object that has a length property and a series of numbered properties. Each numbered property is called an element, and each element can store a value of any type.
+
+An Example of an array is:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+# --question--
+
+## --text--
+
+What is an array in JavaScript?
+
+## --answers--
+
+A function that stores multiple strings and numbers.
+
+---
+
+A data type used exclusively for numerical operations.
+
+---
+
+An ordered collection of items that can store values of any type, including strings and numbers.
+
+---
+
+A variable that can only store string values.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
new file mode 100644
index 00000000000..b236859b448
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -0,0 +1,47 @@
+---
+id: 661e27568602567c118451d2
+title: Learn Arrays and Loops Lesson B
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-b
+---
+
+# --description--
+
+To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+
+For example, to access the first element of the `fruits` array, you can use the following code:
+
+```javascript
+const fruits = ['apple', 'banana', 'orange'];
+console.log(fruits[0]); // Output: apple
+console.log(fruits[2]); // Output: orange
+```
+
+If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+
+
+# --question--
+
+## --text--
+
+What is the element at the fourth index of the `fruits` array?
+
+## --answers--
+
+`orange`
+
+---
+
+`apple`
+
+---
+
+`pineapple`
+
+---
+
+`undefined`
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
new file mode 100644
index 00000000000..77689a7e3be
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-c.md
@@ -0,0 +1,64 @@
+---
+id: 661e27578602567c118451d3
+title: Learn Arrays and Loops Lesson C
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-c
+---
+
+# --description--
+
+One of the most common ways to add a new element to an array is by using the `push()` method. The `push()` method adds one or more elements to the end of an array and returns the new length of the array.
+
+For example, to add a new element to the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'bunny'];
+pet.push('parrot');
+console.log(pet); // Output: ['cat', 'dog', 'bunny', 'parrot']
+```
+
+To remove the last element of an array, you can use the `pop()` method. The `pop()` method removes the last element from an array and returns that element.
+
+For example, to remove the last element from the `pet` array, you can use the following code:
+
+```javascript
+const pet = ['cat', 'dog', 'tiger'];
+pet.pop();
+console.log(pet); // Output: ['cat', 'dog']
+```
+
+
+# --question--
+
+## --text--
+
+Given the following JavaScript code, what will be the output after executing the code snippet?
+
+```javascript
+const animals = ['deer', 'whale', 'frog'];
+animals.push('shark', 'bear');
+const removed = animals.pop();
+
+console.log(animals);
+console.log(removed);
+```
+
+## --answers--
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark']` and `'bear'`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `null`
+
+---
+
+`['deer', 'whale', 'frog', 'shark', 'bear']` and `['deer', 'whale', 'frog', 'shark']`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
new file mode 100644
index 00000000000..3954469401c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-d.md
@@ -0,0 +1,67 @@
+---
+id: 661e27588602567c118451d4
+title: Learn Arrays and Loops Lesson D
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-d
+---
+
+# --description--
+
+One of the more complex methods used with arrays are the `splice()` and `slice()` methods. The `splice()` method changes the contents of an array by removing or replacing an element in the array. The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `begin` to `end` (`end` not included). The original array will not be modified.
+
+For example, to remove the second element from the `characters` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+characters.splice(1, 1);
+console.log(characters); // Output: ['Harry', 'Hermione']
+```
+
+The above element removes the second element from the `characters` array. The `splice()` method takes two arguments: the index of the element to remove and the number of elements to remove.
+
+
+To create a new array with the second element from the `character` array, you can use the following code:
+
+```javascript
+const characters = ['Harry', 'Ron', 'Hermione'];
+const newCharacters = characters.slice(1, 2);
+console.log(newCharacters); // Output: ['Ron']
+```
+
+The above code creates a new array `newCharacters` with the second element from the `characters` array. The `slice()` method takes two arguments: the index of the element to start the slice and the index of the element to end the slice (not included).
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+
+```javascript
+const numbers = [10, 20, 30, 40, 50];
+numbers.splice(3, 1);
+const slicedNumbers = numbers.slice(2, 4);
+
+console.log(numbers);
+console.log(slicedNumbers);
+```
+
+## --answers--
+
+`numbers` output: `[10, 20, 30, 50]` and `slicedNumbers` output: `[30, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 40]` and `slicedNumbers` output: `[30, 40]`
+
+---
+
+`numbers` output: `[10, 20, 50, 40]` and `slicedNumbers` output: `[20, 50]`
+
+---
+
+`numbers` output: `[10, 20, 30, 50, 40]` and `slicedNumbers` output: `[30, 50]`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
new file mode 100644
index 00000000000..28382318c19
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-e.md
@@ -0,0 +1,63 @@
+---
+id: 661e27588602567c118451d5
+title: Learn Arrays and Loops Lesson E
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-e
+---
+
+# --description--
+
+Now that you have a basic understanding about arrays, let's talk about loops. Loops are used to execute a block of code multiple times. One of those loops is the `while` loop. The `while` loop executes a block of code as long as the condition is true. The syntax of the `while` loop is as follows:
+
+```javascript
+while (condition) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+let i = 1;
+while (i <= 5) {
+  console.log(i);
+  i++;
+}
+```
+
+The above code snippet initializes a variable `i` with the value `1`. The `while` loop executes the block of code as long as the value of `i` is less than or equal to `5`. The value of `i` is incremented by `1` in each iteration.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+let i = 5;
+while (i >= 0) {
+  console.log(i);
+  i--;
+}
+```
+
+
+## --answers--
+
+`5`, `4`, `3`, `2`, `1`, `0`
+
+---
+
+`5`, `4`, `3`, `2`, `1`
+
+---
+
+`5`, `4`, `3`, `2`, `1`, `0`, `-1`
+
+---
+
+`1`, `2`, `3`, `4`, `5`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
new file mode 100644
index 00000000000..b5908948394
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 661e27598602567c118451d6
+title: Learn Arrays and Loops Lesson F
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-f
+---
+
+# --description--
+
+The `for` loop is another type of loop that is used to execute a block of code multiple times. The `for` loop is used when the number of iterations is known. The syntax of the `for` loop is as follows:
+
+```javascript
+for (initialization; condition; increment/decrement) {
+  // code block to be executed
+}
+```
+
+For example, the following code snippet prints the numbers from 1 to 5:
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+  console.log(i);
+}
+```
+
+To iterate over an array using a `for` loop, you can use the array's length property. For example, the following code snippet prints the elements of an array:
+
+```javascript
+const arr = [1, 2, 3, 4, 5];
+for (let i = 0; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+```
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const items = ['apple', 'banana', 'cherry', 'date'];
+for (let i = 1; i < items.length; i++) {
+  console.log(items[i]);
+}
+```
+
+## --answers--
+
+```bash
+apple
+banana
+cherry
+date
+```
+
+---
+
+```bash
+banana
+cherry
+```
+
+---
+
+```bash
+apple
+banana
+cherry
+```
+
+---
+
+```bash
+banana
+cherry
+date
+```
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
new file mode 100644
index 00000000000..f73a588c036
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -0,0 +1,57 @@
+---
+id: 661e275a8602567c118451d7
+title: Learn Arrays and Loops Lesson G
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-g
+---
+
+# --description--
+
+Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+
+```javascript
+const array = [1, 2, 3, 4, 5];
+
+const newArray = array.map((arrayValue) => {
+  return arrayValue * 2;
+});
+
+console.log(newArray); // Output: [2, 4, 6, 8, 10]
+```
+
+The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2;` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const numbers = [1, 2, 3, 4, 5];
+const newNumbers = numbers.map((number) => {
+  return number * 3;
+});
+
+console.log(newNumbers);
+```
+
+## --answers--
+
+`[1, 2, 3, 4, 5]`
+
+---
+
+`[3, 6, 9, 12, 15]`
+
+---
+
+`[1, 3, 5, 7, 9]`
+
+---
+
+`[3, 6, 9, 12, 15, 18]`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
new file mode 100644
index 00000000000..9c024e353e5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 661e275a8602567c118451d8
+title: Learn Arrays and Loops Lesson H
+challengeType: 15
+dashedName: learn-arrays-and-loops-lesson-h
+---
+
+# --description--
+
+One other useful array method is the `filter()` method. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. The syntax of the `filter()` method is as follows:
+
+```javascript
+const numbers = [2, 5, 6, 1, 9, -1]
+
+const newNumbers = numbers.filter((number) => {
+  return number > 2;
+});
+
+console.log(newNumbers); // Output: [5, 6, 9]
+```
+
+The `filter()` method creates a new array with all elements that are greater than 2. The `filter()` method does not change the original array.
+
+# --question--
+
+## --text--
+
+What will be the output of the following JavaScript code snippet?
+
+```javascript
+const strings = ['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango'];
+const newStrings = strings.filter((string) => {
+  return string.length > 5;
+});
+
+console.log(newStrings);
+```
+
+## --answers--
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi', 'mango']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+---
+
+`['banana, 'cherry', 'orange']`
+
+---
+
+`['apple', 'banana', 'cherry', 'orange', 'kiwi']`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
new file mode 100644
index 00000000000..e4e05c6caa9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-a.md
@@ -0,0 +1,28 @@
+---
+id: 6570447ce7b02272663824df
+title: Learn Block and Inline Lesson A
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-a
+---
+
+# --description--
+
+Most of the elements that you have learned about so far are block elements. In other words, their default style is `display: block`. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
+
+# --question--
+
+## --text--
+
+Which of the following statements about block elements is true?
+
+## --answers--
+
+Block elements take up only the space necessary for their content.
+
+---
+
+Block elements start on a new line and take up the full width available.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
new file mode 100644
index 00000000000..1adf9ce84ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-b.md
@@ -0,0 +1,41 @@
+---
+id: 6570447de7b02272663824e0
+title: Learn Block and Inline Lesson B
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-b
+---
+
+# --description--
+
+Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or `<a>` tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. <a  href="https://www.freecodecamp.org/" target="_blank">(Like this)</a> The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
+
+# --question--
+
+## --assignment--
+
+Search the web for a list of `block` elements and a list of `inline` elements.
+
+## --text--
+
+What is the difference between a `block` element and an `inline` element?
+
+## --answers--
+
+`block` elements are displayed without line breaks, while `inline` elements are displayed with line breaks.
+
+---
+
+`block` elements take up the full width available, while `inline` elements only take up the space necessary for their content.
+
+---
+
+`block` elements are always positioned horizontally, while `inline` elements are positioned vertically.
+
+---
+
+`block` elements are used for small sections of text, while `inline` elements are used for larger chunks of content.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
new file mode 100644
index 00000000000..8d5a6c6a1e7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-c.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e1
+title: Learn Block and Inline Lesson C
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-c
+---
+
+# --description--
+
+Padding is used to create space around an element's content, inside of any defined borders. With inline elements, padding adds space to the left, right, top, and bottom of the content. However, it's important to note that while padding does affect the space around the content, it does not affect the layout of other elements around the inline element. This means that horizontal padding (left and right) is respected, but vertical padding (top and bottom) does not cause other elements to move away.
+
+# --question--
+
+## --text--
+
+How does `padding` affect `inline` elements?
+
+## --answers--
+
+Padding has no effect on `inline` elements.
+
+---
+
+Padding increases the width and height of `inline` elements.
+
+---
+
+Padding only affects the horizontal spacing of `inline` elements.
+
+---
+
+Padding only affects the vertical spacing of `inline` elements.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
new file mode 100644
index 00000000000..8fb0f2e731e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-d.md
@@ -0,0 +1,36 @@
+---
+id: 6570447ee7b02272663824e2
+title: Learn Block and Inline Lesson D
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-d
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top margin to an `inline` element?
+
+# --question--
+
+## --text--
+
+How does `margin-top` affect `inline` elements?
+
+## --answers--
+
+`margin-top` has no impact on the layout of `inline` elements
+
+---
+
+`margin-top` increases the height of `inline` elements.
+
+---
+
+`margin-top` adds space above the `inline` element.
+
+---
+
+`margin-top` only affects the horizontal spacing of `inline` elements.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
new file mode 100644
index 00000000000..edd07ca1499
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-e.md
@@ -0,0 +1,36 @@
+---
+id: 6570447fe7b02272663824e3
+title: Learn Block and Inline Lesson E
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-e
+---
+
+# --description--
+
+Inline-block elements behave like inline elements, but with block-style padding and margin. `display: inline-block` is a useful tool to know about, but in practice, you'll probably end up reaching for flexbox more often if you're trying to line up a bunch of boxes. Flexbox will be covered in-depth in the next lesson.
+
+# --question--
+
+## --text--
+
+What is the difference between an `inline` element and an `inline-block` element?
+
+## --answers--
+
+`inline` elements are displayed without line breaks, while `inline-block` elements are displayed with line breaks.
+
+---
+
+`inline` elements do not allow setting width and height, while `inline-block` elements allow setting width and height.
+
+---
+
+`inline` elements are always positioned horizontally, while `inline-block` elements are positioned vertically.
+
+---
+
+`inline` elements can contain block-level elements, while `inline-block` elements cannot contain other elements.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
new file mode 100644
index 00000000000..1833bdad58b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-f.md
@@ -0,0 +1,36 @@
+---
+id: 65704480e7b02272663824e4
+title: Learn Block and Inline Lesson F
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-f
+---
+
+# --description--
+
+The concept of “Normal flow” is implied in the box-model resources, but isn’t laid out very specifically. Read <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" target="_blank">Normal Flow</a> from MDN to make sure you understand how elements lay themselves out by default.
+
+# --question--
+
+## --text--
+
+What is the "Normal flow" in CSS layouts?
+
+## --answers--
+
+Normal flow refers to the process of animating elements in a CSS layout.
+
+---
+
+Normal flow is a CSS property used to control the visibility of elements in a layout.
+
+---
+
+Normal flow is a CSS rule that defines the order of media queries for responsive design.
+
+---
+
+Normal flow in CSS layouts refers to the default positioning of elements on a webpage.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
new file mode 100644
index 00000000000..cdd4d5aa872
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-g.md
@@ -0,0 +1,36 @@
+---
+id: 65704482e7b02272663824e5
+title: Learn Block and Inline Lesson G
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-g
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline `elements`, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT an `inline` element?
+
+## --answers--
+
+form element
+
+---
+
+anchor element
+
+---
+
+image element
+
+---
+
+span element
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
new file mode 100644
index 00000000000..a5880579050
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-h.md
@@ -0,0 +1,36 @@
+---
+id: 65704483e7b02272663824e6
+title: Learn Block and Inline Lesson H
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-h
+---
+
+# --description--
+
+Now that you have some basic understanding of `block` and inline elements, pull up your list of `block` and `inline` elements from a couple questions ago and see if you can identify which of the following elements are `block` elements and which are `inline` elements.
+
+# --question--
+
+## --text--
+
+Which of the following is NOT a `block` level element?
+
+## --answers--
+
+paragraph element
+
+---
+
+image element
+
+---
+
+unordered list element
+
+---
+
+footer element
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
new file mode 100644
index 00000000000..9a9b79ea930
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -0,0 +1,32 @@
+---
+id: 65704484e7b02272663824e7
+title: Learn Block and Inline Lesson I
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-i
+---
+
+# --description--
+
+You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+
+# --question--
+
+## --text--
+
+What is the primary difference of `span` and `div` elements from other elements?
+
+## --answers--
+
+Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+
+---
+
+`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+
+---
+
+`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
new file mode 100644
index 00000000000..5f6cd8f9636
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-j.md
@@ -0,0 +1,36 @@
+---
+id: 65704485e7b02272663824e8
+title: Learn Block and Inline Lesson J
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-j
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works, what happens when you add a top padding of 10 pixels to a `span` element?
+
+# --question--
+
+## --text--
+
+What happens when you add `padding-top: 10px;` to a `span` element?
+
+## --answers--
+
+The `span` element's content will shift downward by 10 pixels.
+
+---
+
+The `span` element will gain additional space above its content.
+
+---
+
+The `span` element's width will increase by 10 pixels.
+
+---
+
+Padding has no effect on the layout of a `span` element.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
new file mode 100644
index 00000000000..8a395de16e6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 65704486e7b02272663824e9
+title: Learn Block and Inline Lesson K
+challengeType: 15
+dashedName: learn-block-and-inline-lesson-k
+---
+
+# --description--
+
+Now that you have a basic understanding on how adding width and height to `inline` elements works.
+
+# --question--
+
+## --text--
+
+What happens when you add a bottom padding of 15 pixels to a `span` element with display set to `inline-block`?
+
+## --answers--
+
+The `span` element's content will shift upward by 15 pixels.
+
+---
+
+The `span` element's width will increase by 15 pixels.
+
+---
+
+The `span` element will gain additional space below its content.
+
+---
+
+Padding has no effect on the layout of an `inline-block` `span` element.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
new file mode 100644
index 00000000000..30d70604443
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 63ee351d0d8d4841c3a7091a
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson A
+challengeType: 15
+dashedName: css-foundations-lesson-a
+---
+
+# --description--
+
+A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
+
+```html
+<!-- index.html -->
+
+<div>Hello, World!</div>
+<div>Hello again!</div>
+<p>Hi...</p>
+<div>Okay, bye.</div>
+```
+
+```css
+/* styles.css */
+
+div {
+  color: white;
+}
+```
+
+Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the CSS code given above?
+
+## --answers--
+
+The code applies a `white` color to all elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `div` elements in the HTML file.
+
+---
+
+The code applies a `white` color to all `p` elements in the HTML file.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
new file mode 100644
index 00000000000..4431d278eef
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-b.md
@@ -0,0 +1,75 @@
+---
+id: 63ee35240d8d4841c3a7091b
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson B
+challengeType: 15
+dashedName: css-foundations-lesson-b
+---
+
+# --description--
+
+Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
+
+```html
+<!-- index.html -->
+
+<div class="alert-text">
+  Please agree to our terms of service.
+</div>
+```
+
+```css
+/* styles.css */
+
+.alert-text {
+  color: red;
+}
+```
+
+Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
+
+Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
+
+## ID Selectors
+ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
+
+```html
+<!-- index.html -->
+
+<div id="title">My Awesome 90's Page</div>
+```
+
+```css
+/* styles.css */
+
+#title {
+  background-color: red;
+}
+```
+
+Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
+
+The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
+
+# --question--
+
+## --text--
+
+What is the syntax for class and ID selectors?
+
+## --answers--
+
+To select a `class` you use `$` and to select an `id` you use `#`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `*`
+
+---
+
+To select a `class` you use `.` and to select an `id` you use `#`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
new file mode 100644
index 00000000000..03f093145ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -0,0 +1,90 @@
+---
+id: 63ee352b0d8d4841c3a7091c
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson C
+challengeType: 15
+dashedName: css-foundations-lesson-c
+---
+
+# --description--
+
+What if you have two groups of elements that share some of their style declarations?
+
+```css
+.read {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+
+.unread {
+  color: white;
+  background-color: black;
+  /* several unique declarations */
+}
+```
+
+Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+
+```css
+.read,
+.unread {
+  color: white;
+  background-color: black;
+}
+
+.read {
+  /* several unique declarations */
+}
+
+.unread {
+  /* several unique declarations */
+}
+```
+
+Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+
+# --question--
+
+## --text--
+
+How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+
+## --answers--
+
+```css
+.red-box,
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box {
+  width: 25px;
+  height: 25px;
+}
+
+.yellow-box {
+  width: 25px;
+  height: 25px;
+}
+```
+
+---
+
+```css
+.red-box { 
+  width: 25px;
+  .yellow-box {
+    height: 25px;
+  }
+}
+```
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
new file mode 100644
index 00000000000..9dc6044c89b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -0,0 +1,86 @@
+---
+id: 63ee35300d8d4841c3a7091d
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson D
+challengeType: 15
+dashedName: css-foundations-lesson-d
+---
+
+# --description--
+
+Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
+
+```css
+.subsection.header {
+  color: red;
+}
+```
+
+What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
+
+This can also be used to chain a class and an ID, as shown below:
+
+```html
+<div>
+  <div class="subsection header">Latest Posts</div>
+  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
+</div>
+```
+
+You can take the two elements above and combine them with the following:
+
+```css
+.subsection.header {
+  color: red;
+}
+
+.subsection#preview {
+  color: blue;
+}
+```
+
+In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+
+# --question--
+
+## --text--
+
+Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
+
+## --answers--
+
+```css
+.title.primary {
+  ...
+}
+```
+
+---
+
+```css
+.title > primary {
+  ...
+}
+```
+
+---
+
+```css
+#title.primary { 
+  ...
+}
+```
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
new file mode 100644
index 00000000000..f813f0f3f45
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-e.md
@@ -0,0 +1,61 @@
+---
+id: 63ee35370d8d4841c3a7091e
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson E
+challengeType: 15
+dashedName: css-foundations-lesson-e
+---
+
+# --description--
+
+Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
+
+So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
+
+```html
+<!-- index.html -->
+
+<div class="ancestor"> <!-- A -->
+  <div class="contents"> <!-- B -->
+    <div class="contents"> <!-- C -->
+    </div>
+  </div>
+</div>
+
+<div class="contents"></div> <!-- D -->
+```
+
+```css
+/* styles.css */
+
+.ancestor .contents {
+  /* some declarations */
+}
+```
+
+In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
+
+There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
+
+# --question--
+
+## --text--
+
+What does the descendant combinator do?
+
+## --answers--
+
+It groups certain classes together which share the same declarations.
+
+---
+
+It gives the ability to select an element that shares the same `class` and `id`.
+
+---
+
+It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
new file mode 100644
index 00000000000..512036b1aba
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -0,0 +1,47 @@
+---
+id: 63ee353e0d8d4841c3a7091f
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson F
+challengeType: 15
+dashedName: css-foundations-lesson-f
+---
+
+# --description--
+
+Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
+
+External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
+
+First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
+
+Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white;` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
+
+A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
+
+A couple of the pros to this method are:
+
+1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
+2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
+
+# --question--
+
+## --text--
+
+Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
+
+## --answers--
+
+It specifies the location of the CSS file relative to the location of the HTML file.
+
+---
+
+It specifies the relationship between the HTML file and the linked file.
+
+---
+
+It specifies the type of file being linked (e.g. "stylesheet").
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
new file mode 100644
index 00000000000..d31beea7a94
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 63ee35450d8d4841c3a70920
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson G
+challengeType: 15
+dashedName: css-foundations-lesson-g
+---
+
+# --description--
+
+Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
+
+Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
+
+```html
+<head>
+  <style>
+    div {
+      color: white;
+      background-color: black;
+    }
+
+    p {
+      color: red;
+    }
+  </style>
+</head>
+<body>...</body>
+```
+
+This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
+
+# --question--
+
+## --text--
+
+Which of the following is a difference between internal and external CSS methods?
+
+## --answers--
+
+The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
+
+---
+
+The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
+
+---
+
+The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
new file mode 100644
index 00000000000..ccbb24c894c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -0,0 +1,46 @@
+---
+id: 63ee354c0d8d4841c3a70921
+videoId: LGQuIIv2RVA
+title: CSS Foundations Lesson H
+challengeType: 15
+dashedName: css-foundations-lesson-h
+---
+
+# --description--
+
+Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+
+```html
+<body>
+  <div style="color: white; background-color: black;">...</div>
+</body>
+```
+
+The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+
+If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+
+# --question--
+
+## --text--
+
+Which of the following is the main disadvantage of using inline CSS?
+
+## --answers--
+
+It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+
+---
+
+It requires using selectors, which can be complicated for beginners.
+
+---
+
+Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
new file mode 100644
index 00000000000..2e292c446fd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-a.md
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Lesson A
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
new file mode 100644
index 00000000000..d1891dcb6cc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Lesson B
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
new file mode 100644
index 00000000000..aee970d3d1f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-c.md
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Lesson C
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
new file mode 100644
index 00000000000..18738183e1e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-d.md
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Lesson D
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
new file mode 100644
index 00000000000..b7608df5093
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Lesson E
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
new file mode 100644
index 00000000000..97c78768eb6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Lesson F
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
new file mode 100644
index 00000000000..ef09942a733
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-g.md
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Lesson G
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
new file mode 100644
index 00000000000..da43c0c9240
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-h.md
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Lesson H
+challengeType: 15
+dashedName: the-cascade-of-css-lesson-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
new file mode 100644
index 00000000000..48136d70112
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-a.md
@@ -0,0 +1,51 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Lesson A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-a
+---
+
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
new file mode 100644
index 00000000000..d006d88c782
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-b.md
@@ -0,0 +1,46 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Lesson B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-b
+---
+
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
new file mode 100644
index 00000000000..efe82f59f24
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-c.md
@@ -0,0 +1,42 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Lesson C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-c
+---
+
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
new file mode 100644
index 00000000000..5acd29aa255
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-d.md
@@ -0,0 +1,42 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Lesson D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-d
+---
+
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
new file mode 100644
index 00000000000..8ca178a3a3a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-e.md
@@ -0,0 +1,46 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Lesson E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-e
+---
+
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+`` `Hello, my name is ${name} and I am ${age} years old.` ``
+
+---
+
+`` `Hello, my name is `name` and I am `age` years old.` ``
+
+---
+
+`` `Hello, my name is {name} and I am {age} years old.` ``
+
+---
+
+`` `Hello, my name is $name and I am $age years old.` ``
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
new file mode 100644
index 00000000000..5427eaba950
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-f.md
@@ -0,0 +1,59 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Lesson F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-f
+---
+
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description              | Example |
+| -------- | ------------------------ | ------- |
+| ==       | Equal (value comparison) | x == y  |
+| !=       | Not equal                | x != y  |
+| >        | Greater than             | x > y   |
+| <        | Less than                | x < y   |
+| >=       | Greater than or equal to | x >= y  |
+| <=       | Less than or equal to    | x <= y  |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
new file mode 100644
index 00000000000..fb331d483e9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-g.md
@@ -0,0 +1,54 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Lesson G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-g
+---
+
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
new file mode 100644
index 00000000000..47131dd4005
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-h.md
@@ -0,0 +1,58 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Lesson H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-h
+---
+
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
new file mode 100644
index 00000000000..fdd1b60e47f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -0,0 +1,60 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Lesson I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-i
+---
+
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
new file mode 100644
index 00000000000..1163a094c48
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-j.md
@@ -0,0 +1,101 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Lesson J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-j
+---
+
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
new file mode 100644
index 00000000000..59af5ee4add
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-k.md
@@ -0,0 +1,102 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Lesson K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-k
+---
+
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
new file mode 100644
index 00000000000..f17ab8ffd27
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-l.md
@@ -0,0 +1,42 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Lesson L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-lesson-l
+---
+
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
new file mode 100644
index 00000000000..d58d1fcceb5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -0,0 +1,48 @@
+---
+id: 6617a128e90de1b3fd10bd4d
+title: Learn Function Basics Lesson A
+challengeType: 15
+dashedName: learn-function-basics-lesson-a
+---
+
+# --description--
+
+Let’s discuss parameters and arguments in the context of the following example function:
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+
+In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+
+# --question--
+
+## --text--
+
+What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+
+## --answers--
+
+The actual value that is used when calling the function.
+
+---
+
+A placeholder for the value that will be passed to the function when it is called.
+
+---
+
+The name of the function.
+
+---
+
+The result of the function execution.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
new file mode 100644
index 00000000000..6d2617ffff9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-b.md
@@ -0,0 +1,52 @@
+---
+id: 6617a1fce90de1b3fd10bd4e
+title: Learn Function Basics Lesson B
+challengeType: 15
+dashedName: learn-function-basics-lesson-b
+---
+
+# --description--
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal('Goat'));
+```
+
+By putting `animal` inside the parentheses of the `favoriteAnimal()` function, you are telling JavaScript that you will send some value to your `favoriteAnimal` function. This means that animal is just a placeholder for some future value. But what value are you sending?
+
+The last line, `favoriteAnimal('Goat')`, is where you are calling your `favoriteAnimal` function and passing the value `'Goat'` inside that function. Here, `'Goat'` is your argument. You are telling the `favoriteAnimal` function, "Please send `'Goat'` to the `favoriteAnimal` function and use `'Goat'` wherever the `'animal'` placeholder is." Because of the flexibility that using a parameter provides, you can declare any animal to be your favorite.
+
+Here is a diagram to help you visualize how parameters are passed to a function, and how values get returned from it.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/c53dd9a12f0c9afde0d9229f82a176170f12e120/foundations/javascript_basics/function_basics/imgs/00.png" alt="A description of a function with arrows explaining that the values between the parentheses of the function itself are called parameters, and the values which are issued when the function is used are called arguments" style="width:95%;height:auto;" />
+
+Make note of the fact that by calling `favoriteAnimal()` inside of `console.log()` with the argument `'Goat'`, you get the return value of the function, string of `"Goat is my favorite animal!"`, printed to the console. You're passing in a function call `favoriteAnimal('Goat')` as an argument in a different function call - `log()`.
+
+# --question--
+
+## --text--
+
+If you change the argument from `'Goat'` to `'Elephant'` in the `favoriteAnimal('Goat')` function call, what would `console.log(favoriteAnimal('Elephant'))` print to the console?
+
+## --answers--
+
+`"Goat is my favorite animal!"`
+
+---
+
+The function will return an error because `"Elephant"` is not a recognized argument.
+
+---
+
+`"Elephant is my favorite animal!"`
+
+---
+
+`"Kangaroo is my favorite animal!"`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
new file mode 100644
index 00000000000..c64dc5b3030
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-c.md
@@ -0,0 +1,62 @@
+---
+id: 6617aee05b87c334e7ae8014
+title: Learn Function Basics Lesson C
+challengeType: 15
+dashedName: learn-function-basics-lesson-c
+---
+
+# --description--
+
+A variable declared inside a function is only visible inside a function. This is called the scope of the variable, this particular scope is called the local scope. Variables declared outside of a function are called global variables and are visible throughout the program. For example, the following code will raise an error:
+
+```js
+function myFunction() {
+  let x = 10;
+}
+
+console.log(x);
+```
+
+The variable `x` is declared inside the function `myFunction` and is not visible outside of the function. The code will raise a `ReferenceError` because `x` is not defined.
+
+If you declare a variable outside of a function, it is called a global variable and is visible throughout the program. For example, the following code will work:
+
+```js
+let x = 10;
+
+function myFunction() {
+  console.log(x);
+}
+
+myFunction();
+```
+
+If a same-named variable is declared inside the function then it shadows the outer one.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```js
+let x = 10;
+
+function myFunction() {
+  let x = 20;
+  console.log(x);
+}
+```
+
+## --answers--
+
+10
+
+---
+
+20
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
new file mode 100644
index 00000000000..39f0c73af6e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-d.md
@@ -0,0 +1,56 @@
+---
+id: 6617aee95b87c334e7ae8015
+title: Learn Function Basics Lesson D
+challengeType: 15
+dashedName: learn-function-basics-lesson-d
+---
+
+# --description--
+
+If a function is called, but an argument is not provided, then the parameter will be assigned the value of `undefined`. This can lead to unexpected results if the function is not designed to handle this case.
+
+```js
+function favoriteAnimal(animal) {
+  return animal + " is my favorite animal!"
+}
+
+console.log(favoriteAnimal()); // Output: undefined is my favorite animal!
+```
+
+In the example above, the function `favoriteAnimal` is called without an argument. The parameter `animal` is assigned the value of `undefined`, which is then concatenated with the string `" is my favorite animal!"`.
+
+If a value is not provided you can make use of default parameters. Default parameters allow you to assign a default value to a parameter if no value is provided when the function is called.
+
+```js
+function favoriteAnimal(animal = 'Giant Panda') {
+  return animal + " is my favorite animal!"
+}
+```
+
+In the example above, the default value of the parameter `animal` is set to `'Giant Panda'`. If the function `favoriteAnimal` is called without an argument, the parameter `animal` will be assigned the value `'Giant Panda'`.
+
+# --question--
+
+## --text--
+
+How do default parameters in JavaScript functions enhance the behavior of functions like `favoriteAnimal` when called without any arguments?
+
+## --answers--
+
+They cause the function to throw an error if no argument is provided.
+
+---
+
+They prevent the function from being called without the required number of arguments.
+
+---
+
+They ensure the function returns `null` to indicate that no argument was passed.
+
+---
+
+They allow the function to execute with a predefined value, avoiding `undefined` related issues.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
new file mode 100644
index 00000000000..3f9b2b0ee20
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-e.md
@@ -0,0 +1,74 @@
+---
+id: 6617aef05b87c334e7ae8016
+title: Learn Function Basics Lesson E
+challengeType: 15
+dashedName: learn-function-basics-lesson-e
+---
+
+# --description--
+
+As you have seen before, functions can return a value using the `return` keyword. The `return` keyword is used to return a value from a function. When the `return` keyword is used, the function will stop executing and return the value specified after the `return` keyword.
+
+```js
+function add(a, b) {
+  return a + b
+}
+
+console.log(add(2, 3)); // Output: 5
+```
+
+But what happens if the `return` keyword is used before the end of the function? To answer this question, consider the following example:
+
+```js
+function add(a, b) {
+  if(a > 2){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3, 7)); // Output: 7
+```
+
+In the example above, the function `add` has a conditional statement that checks if the value of `a` is greater than `2`. If the condition is met, the function will return the value of `b` and stop executing. If the condition is not met, the function will return the sum of `a` and `b`.
+
+# --question--
+
+## --text--
+
+What is the output of the following code snippet?
+
+```js
+function add(a, b = 12) {
+  if(b > 11){
+    return b * 2;
+  } else if(a > 3){
+    return b;
+  }
+
+  return a + b;
+}
+
+console.log(add(3));
+```
+
+## --answers--
+
+The output is `24`.
+
+---
+
+The output is `14`.
+
+---
+
+The output is `15`.
+
+---
+
+The output is `12`.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
new file mode 100644
index 00000000000..202651121c6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-f.md
@@ -0,0 +1,52 @@
+---
+id: 6617aef85b87c334e7ae8017
+title: Learn Function Basics Lesson F
+challengeType: 15
+dashedName: learn-function-basics-lesson-f
+---
+
+# --description--
+
+Arrow functions are a more modern way to write functions in JavaScript. They provide a more compact syntax compared to traditional function expressions. Arrow functions are defined using the `=>` syntax.
+
+```js
+const add = (a, b) => {
+  return a + b;
+}
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword is used to return the result of the addition operation.
+
+If the arrow function has only one expression, the curly braces `{}` and the `return` keyword can be omitted. The expression will be implicitly returned.
+
+```js
+const add = (a, b) => a + b;
+```
+
+In the example above, the arrow function `add` takes two parameters `a` and `b` and returns their sum. The `return` keyword and curly braces `{}` are omitted, and the result of the addition operation is implicitly returned.
+
+# --question--
+
+## --text--
+
+What makes arrow functions different from traditional function expressions in JavaScript?
+
+## --answers--
+
+They cannot return values.
+
+---
+
+They cannot take parameters.
+
+---
+
+They have a more compact syntax compared to traditional function expressions.
+
+---
+
+They require the use of the `function` keyword.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
new file mode 100644
index 00000000000..545705ca00f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-a.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e0e72c65bc8e73dfe1e
+videoId: LGQuIIv2RVA
+title: HTML Foundations Lesson A
+challengeType: 15
+dashedName: html-foundations-lesson-a
+---
+
+# --description--
+
+Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
+
+Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
+
+Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
+
+A full paragraph element looks like this:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/html-foundations/html-foundations-01.png" alt='An opening p tag, followed by the content string "some text content", followed by a closing p tag.' />
+
+# --assignment--
+
+Watch Kevin Powell’s <a href="https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-" target="_blank">Introduction to HTML video</a>
+
+# --question--
+
+## --text--
+
+What are HTML tags?
+
+## --answers--
+
+HTML tags tell the browser what content an element contains.
+
+---
+
+HTML tags tell the browser when to load its content.
+
+---
+
+HTML tags tell the browser what content the next element contains.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
new file mode 100644
index 00000000000..cbf924480fc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e1672c65bc8e73dfe1f
+title: HTML Foundations Lesson B
+challengeType: 15
+dashedName: html-foundations-lesson-b
+---
+
+# --description--
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+
+HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+
+Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+
+# --question--
+
+## --text--
+
+Why are self-closing tags like `<br/>` or `<img>` essential in HTML?
+
+## --answers--
+
+They prevent formatting issues in HTML documents.
+
+---
+
+They indicate empty elements and require no closing tag.
+
+---
+
+They improve website performance by reducing code complexity.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
new file mode 100644
index 00000000000..51c84c3d068
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-c.md
@@ -0,0 +1,54 @@
+---
+id: 637f4e1c72c65bc8e73dfe20
+title: HTML Foundations Lesson C
+challengeType: 15
+dashedName: html-foundations-lesson-c
+---
+
+# --description--
+
+To demonstrate an HTML boilerplate, you first need an HTML file to work with.
+
+Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
+
+You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
+
+To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
+
+It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an `index.html` page when users land on your websites - and not having one will cause big problems.
+
+## The DOCTYPE
+
+Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
+
+The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
+
+Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
+
+# --question--
+## --text--
+
+What is the purpose of the `DOCTYPE` declaration?
+
+## --answers--
+
+It tells the browser which version of HTML to use to render the document.
+
+---
+
+It tells the browser that this document uses JavaScript.
+
+---
+
+It tells the browser the title of the document.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
new file mode 100644
index 00000000000..895e6f06caa
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-d.md
@@ -0,0 +1,46 @@
+---
+id: 637f4e2872c65bc8e73dfe21
+title: HTML Foundations Lesson D
+challengeType: 15
+dashedName: html-foundations-lesson-d
+---
+
+# --description--
+
+After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
+
+This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
+
+Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+</html>
+```
+
+## What is the lang attribute?
+`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
+
+# --question--
+
+## --text--
+
+What is the `html` element?
+
+## --answers--
+
+It is the root element in the document and tells the browser which version of HTML it should use.
+
+---
+
+It is the root element in the document and all other elements should descend from it.
+
+---
+
+It is the root element in the document and all other elements should come after it.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
new file mode 100644
index 00000000000..6b23f758ad3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e2f72c65bc8e73dfe22
+title: HTML Foundations Lesson E
+challengeType: 15
+dashedName: html-foundations-lesson-e
+---
+
+# --description--
+
+The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
+
+## The Charset Meta Element
+You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
+
+Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
+
+## Title Element
+Another element you should always include in the head of an HTML document is the `title` element:
+
+```html
+<title>My First Webpage</title>
+```
+
+The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
+
+If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
+
+There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
+
+Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
+
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+</html>
+```
+
+# --question--
+
+## --text--
+
+What is the purpose of the `head` element?
+
+## --answers--
+
+The `head` element is used to display all elements that are displayed on the webpage.
+
+---
+
+The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
+
+---
+
+The `head` element is used to display the header content on top of the webpage.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
new file mode 100644
index 00000000000..bc0d7262f1d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e3672c65bc8e73dfe23
+videoId: V8UAEoOvqFg
+title: HTML Foundations Lesson F
+challengeType: 15
+dashedName: html-foundations-lesson-f
+---
+
+# --description--
+
+The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
+
+To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
+
+---
+
+Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
+
+---
+
+Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
+
+# --question--
+
+## --text--
+
+What is the purpose of the `body` element?
+
+## --answers--
+
+This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
+
+---
+
+This is where you tell the browser how to render the webpage correctly.
+
+---
+
+This is where all content will be displayed on the page such images, text, and links.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
new file mode 100644
index 00000000000..5cfe098a523
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-g.md
@@ -0,0 +1,33 @@
+---
+id: 6376327e2724a688c04636e3
+title: HTML Foundations Lesson G
+challengeType: 15
+dashedName: html-foundations-lesson-g
+---
+
+# --description--
+
+HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
+
+# --question--
+
+## --text--
+
+What are the primary responsibilities of HTML and CSS in creating a webpage?
+
+## --answers--
+
+HTML structures the content, while CSS styles the elements.
+
+---
+
+HTML creates the visual design, while CSS organizes the content.
+
+---
+
+CSS manages the functionality, while HTML controls the layout.
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
new file mode 100644
index 00000000000..6983034f3ad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -0,0 +1,32 @@
+---
+id: 637633162724a688c04636e4
+title: HTML Foundations Lesson H
+challengeType: 15
+dashedName: html-foundations-lesson-h
+---
+
+# --description--
+
+Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+
+# --question--
+
+## --text--
+
+Why are HTML and CSS not typically classified as programming languages?
+
+## --answers--
+
+They lack the ability to create webpages.
+
+---
+
+They focus on presenting information rather than programming logic.
+
+---
+
+They are outdated technologies.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
new file mode 100644
index 00000000000..995073b8a26
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-a.md
@@ -0,0 +1,53 @@
+---
+id: 66581a78b1eb2281159492fa
+title: Learn to Solve Problems and Understand Errors Lesson A
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-a
+---
+
+# --description--
+
+Before you start digging into some pretty nifty JavaScript, you need to begin talking about problem solving: the most important skill a developer needs.
+
+Problem solving is the core thing software developers do. The programming languages and tools they use are secondary to this fundamental skill.
+
+From his book, "Think Like a Programmer", V. Anton Spraul defines problem solving in programming as:
+
+> Problem solving is writing an original program that performs a particular set of tasks and meets all stated constraints.
+
+The set of tasks can range from solving small coding exercises all the way up to building a social network site like Facebook or a search engine like Google. Each problem has its own set of constraints, for example, high performance and scalability may not matter too much in a coding exercise but it will be vital in apps like Google that need to service billions of search queries each day.
+
+New programmers often find problem solving the hardest skill to build. It's not uncommon for budding programmers to breeze through learning syntax and programming concepts, yet when trying to code something on their own, they find themselves staring blankly at their text editor not knowing where to start.
+
+The best way to improve your problem solving ability is by building experience by making lots and lots of programs. The more practice you have the better you'll be prepared to solve real world problems.
+
+# --question--
+
+## --assignment--
+
+Read <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank">How to Think Like a Programmer - Lessons in Problem Solving</a> by Richard Reis.
+
+## --text--
+
+According to V. Anton Spraul in "Think Like a Programmer," what is problem solving in programming?
+
+## --answers--
+
+Learning the syntax and concepts of different programming languages.
+
+---
+
+Building applications with high performance and scalability as the key features.
+
+---
+
+Writing an original program that performs a specific set of tasks and meets all stated constraints.
+
+---
+
+Solving coding exercises to improve programming skills.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
new file mode 100644
index 00000000000..ae905ecf893
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-b.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7ab1eb2281159492fb
+title: Learn to Solve Problems and Understand Errors Lesson B
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-b
+---
+
+# --description--
+
+## Understand the problem
+The first step to solving a problem is understanding exactly what the problem is. If you don’t understand the problem, you won’t know when you’ve successfully solved it and may waste a lot of time on a wrong solution.
+
+To gain clarity and understanding of the problem, write it down on paper, reword it in plain English until it makes sense to you, and draw diagrams if that helps. When you can explain the problem to someone else in plain English, you understand it.
+
+### Plan
+Now that you know what you’re aiming to solve, don’t jump into coding just yet. It’s time to plan out how you’re going to solve it first. Some of the questions you should answer at this stage of the process:
+
+- Does your program have a user interface? What will it look like? What functionality will the interface have? Sketch this out on paper.
+
+- What inputs will your program have? Will the user enter data or will you get input from somewhere else?
+
+- What’s the desired output?
+
+- Given your inputs, what are the steps necessary to return the desired output?
+
+The last question is where you will write out an algorithm to solve the problem. You can think of an algorithm as a recipe for solving a particular problem. It defines the steps that need to be taken by the computer to solve a problem in pseudocode.
+
+# --question--
+
+## --assignment--
+Watch <a href="https://www.youtube.com/watch?v=azcrPFhaY9k" target="_blank">How to Begin Thinking Like a Programmer</a> by Coding Tech. It’s an hour long but packed full of information and definitely worth your time watching.
+
+## --text--
+
+What should you do before starting to code according to the provided text?
+
+## --answers--
+
+Immediately start coding to see what problems arise.
+
+---
+
+Write out the problem in plain English and make sure you can explain it to someone else.
+
+---
+
+Sketch the user interface and start coding the most complex functions first.
+
+---
+
+Collect all possible inputs from users and other sources.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
new file mode 100644
index 00000000000..c837fd96582
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-c.md
@@ -0,0 +1,53 @@
+---
+id: 66581a7bb1eb2281159492fc
+title: Learn to Solve Problems and Understand Errors Lesson C
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-c
+---
+
+# --description--
+
+## Psuedocode
+
+Pseudocode is writing out the logic for your program in natural language instead of code. It helps you slow down and think through the steps your program will have to go through to solve the problem.
+
+Here’s an example of what the pseudocode for a program that prints all numbers up to an inputted number might look like:
+
+```bash
+When the user inputs a number
+Initialize a counter variable and set its value to zero
+While counter is smaller than user inputted number increment the counter by one
+Print the value of the counter variable
+```
+
+This is a basic program to demonstrate how pseudocode looks. There will be more examples of pseudocode included in the assignments.
+
+
+# --question--
+
+## --assignment--
+Read this <a href="https://builtin.com/data-science/pseudocode" target="_blank"> Pseudocode: What It Is and How to Write It</a> article from Built In.
+
+## --text--
+
+What are the benefits of using pseudocode according to the linked article?
+
+## --answers--
+
+Pseudocode is primarily beneficial for beginners as it helps them learn programming languages faster by skipping complex syntax.
+
+---
+
+Pseudocode simplifies communication with non-programmers, aids in code construction, provides a good basis for documentation, and helps in bug detection.
+
+---
+
+Pseudocode entirely eliminates the need for programmers to understand or use programming languages, making it the primary tool for professional coders.
+
+---
+
+Pseudocode is used exclusively for creating detailed flowcharts that replace traditional coding in complex software development environments.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
new file mode 100644
index 00000000000..1a210400dd8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-d.md
@@ -0,0 +1,39 @@
+---
+id: 66581a7bb1eb2281159492fd
+title: Learn to Solve Problems and Understand Errors Lesson D
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-d
+---
+
+# --description--
+
+Reading and understanding error messages is a requirement as a developer. At first glance, many beginners shrink away from error messages as they appear to be “scary” and difficult to understand because they include terms one may not be familiar with.
+
+However, error messages provide developers with a treasure trove of knowledge, and tell you everything you need to know about how to resolve them! Being able to parse error messages and warnings without fear will enable you to effectively debug your applications, receive meaningful help from others, and empower yourself to push forward when faced with an error.
+
+# --question--
+
+## --text--
+
+According to the text, why should developers not shy away from error messages?
+
+## --answers--
+
+Error messages are only for advanced programmers and can be ignored by beginners until they gain more experience.
+
+---
+
+Error messages need to be memorized completely to be effective in programming.
+
+---
+
+Error messages provide crucial information that helps developers understand and fix problems in their code.
+
+---
+
+Error messages are meant to be handled by automated debugging tools and do not require human interpretation.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
new file mode 100644
index 00000000000..bfbe3e7f4ea
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-e.md
@@ -0,0 +1,58 @@
+---
+id: 66581a7cb1eb2281159492fe
+title: Learn to Solve Problems and Understand Errors Lesson E
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-e
+---
+
+# --description--
+
+Let’s assume you have written the following code:
+
+```javascript
+const a = "Hello";
+const b = "World";
+
+console.log(c);
+```
+
+This code will run, but it will generate an error. In technical terms, this is called <dfn>throwing</dfn> an error. The first part of an error displays the type of error. This provides the first clue as to what you're dealing with. You'll learn more about the different error types later in the lesson. In this example, you have a `ReferenceError`.
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/175b5ef2a1b4758a7b75f4ef43d7e27203e5707b/foundations/javascript_basics/understanding_errors/imgs/00.png" width="100%" alt="An error being displayed in the developer console" />
+
+A `ReferenceError` is thrown when one refers to a variable that is not declared and/or initialized within the current scope. In our case, the error message explains that the error has occurred because `c is not defined`.
+
+Different errors of this type have different messages based on what is causing the `ReferenceError`. For example, another message you may run into is `ReferenceError: can't access lexical declaration 'X' before initialization`.
+
+The next part of an error gives us the name of the file in which you can find the error (in this case, our `script.js`), and also the line number.
+
+This allows you to easily navigate to the problematic line in your code. Here, the error originates from the fourth line of `script.js`, which is displayed as a link under the error message with the text at `script.js:4`. If you click this link, most browsers will navigate to the exact line of code and the rest of your script in the Sources tab of the Developer Tools.
+
+Sometimes your browser’s console will also display the column (or character) in the line at which the error is occurring. In our example, this would be at `script.js:4:13`.
+
+# --question--
+
+## --text--
+
+What does the `ReferenceError` in the provided JavaScript code indicate?
+
+## --answers--
+
+The variable used has been declared but used incorrectly in its type.
+
+---
+
+The variable called in the code has not been declared within the current scope.
+
+---
+
+The code has an issue with its syntax that prevents it from being parsed correctly.
+
+---
+
+The variable used has been declared but not initialized within the current scope.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
new file mode 100644
index 00000000000..5fdeefef3ee
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-f.md
@@ -0,0 +1,63 @@
+---
+id: 66581a7db1eb2281159492ff
+title: Learn to Solve Problems and Understand Errors Lesson F
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-f
+---
+
+# --description--
+
+Another important part of an error is the stack trace. This helps you understand when the error was thrown in your application, and what functions were called that led up to the error. So, for example, if you have the following code:
+
+```javascript
+const a = 5;
+const b = 10;
+
+function add() {
+  return c;
+}
+
+function print() {
+  add();
+}
+
+print();
+```
+
+Our function `print()` should call on `add()`, which returns a variable named `c`, which currently has not been declared. The corresponding error is as follows:
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/284f0cdc998be7e4751e29e8458323ad5d320303/foundations/javascript_basics/understanding_errors/imgs/01.png" width="100%" alt="An error showing with a stacktrace in the developer console" />
+
+The stack trace tells us that:
+
+1. `c is not defined` in scope of `add()`, which is declared on line 5.
+1. `add()` was called by `print()`, which was declared on line 9.
+1. `print()` itself was called on line 12.
+
+Thus the stack trace lets you trace the evolution of an error back to its origin, which here is the declaration of `add()`.
+
+# --question--
+
+## --text--
+
+How does the stack trace help in debugging the error in the provided JavaScript code?
+
+## --answers--
+
+The stack trace shows that the function `add()` correctly returns the value of `c`.
+
+---
+
+The stack trace indicates which line in the code needs to be edited to correct a syntax error.
+
+---
+
+The stack trace provides a detailed path of function calls leading to the error, helping identify where `c` is incorrectly referenced.
+
+---
+
+The stack trace only indicates that `print()` was called, but does not provide details about the error in `add()`.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
new file mode 100644
index 00000000000..decdc0a6121
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-g.md
@@ -0,0 +1,56 @@
+---
+id: 66581a7eb1eb228115949300
+title: Learn to Solve Problems and Understand Errors Lesson G
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-g
+---
+
+# --description--
+
+Say you have two strings that you would like to combine to create one message, such as below:
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/4ed59981b4ce2c60b5b83bf7415d3127b61821f5/foundations/javascript_basics/understanding_errors/imgs/03.png" style="width:100%" alt="an example of a type error in the Chrome developer console" />
+
+Here, you'll get a `TypeError` with a message stating that `str1.push is not a function`. This is a common error message that confuses learners because you might know that `.push()` is certainly a function (for example, if you have used it to add items to arrays before).
+
+But that's the key - `.push()` is not a String method, it's an Array method. Hence, it is “not a function” that you can find as a String method. If you change`.push()` to `.concat()`, a proper String method, our code runs as intended!
+
+A good note to keep in mind when faced with a `TypeError` is to consider the data type you are trying to run a method or operation against. You'll likely find that it is not what you think, or the operation or method is not compatible with that type.
+
+# --question--
+
+## --text--
+
+Why does the following JavaScript code result in a `TypeError`?
+
+```js
+const str1 = "Hello";
+const str2 = "World!";
+const message = str1.push(str2);
+```
+
+## --answers--
+
+The `.push()` method can only be used on objects, not strings.
+
+---
+
+The `.push()` method is not available for strings because it is an Array method.
+
+---
+
+The `.push()` method is incorrectly spelled and should be .pusch().
+
+---
+
+The `TypeError` is a result of a syntax error in the JavaScript code.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
new file mode 100644
index 00000000000..5993f5c4745
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-to-solve-problems-and-understand-errors/learn-to-solve-problems-and-understand-errors-lesson-h.md
@@ -0,0 +1,42 @@
+---
+id: 66581a7fb1eb228115949301
+title: Learn to Solve Problems and Understand Errors Lesson H
+challengeType: 15
+dashedName: learn-to-solve-problems-and-understand-errors-lesson-h
+---
+
+# --description--
+
+At this point, you might be wondering how you can resolve these errors.
+
+1. You can start by understanding that the error message is your friend - not your enemy. Error messages tell you exactly what is wrong with your code, and which lines to examine to find the source of the error. Without error messages it would be a nightmare to debug our code - because it would still not work, you just wouldn’t know why!
+
+1. You shoud search your error on the web, most of the time you will be able to find a fix or explanation on StackOverflow or in the documentation. If nothing else, you will receive more clarity as to why you are receiving this error.
+
+1. Another way is to use `console.log()` — it is a popular choice for quick debugging. For more involved troubleshooting, using the debugger might be more appropriate, but using `console.log()` is great for getting immediate feedback without needing to step through your functions. There are also other useful methods such as `console.table()`, `console.trace()`, and more!
+
+# --question--
+
+## --text--
+
+When encountering an error in your code, which of the following is NOT a recommended step for identifying and resolving the issue?
+
+## --answers--
+
+Utilizing `console.log()` or other console methods to debug and gain insights into the values and state of your code.
+
+---
+
+Searching for the error message on resources like StackOverflow or reading documentation.
+
+---
+
+Ignoring the error messages and guessing what might be wrong.
+
+---
+
+Using error messages as a guide to understand what part of the code is causing the problem.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
new file mode 100644
index 00000000000..2401487a055
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-a.md
@@ -0,0 +1,64 @@
+---
+id: 65e185b1500d930ce8ed909b
+title: Learn Variables and Operators Lesson A
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-a
+---
+
+# --description--
+The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <script>
+    // Your JavaScript goes here!
+    console.log("Hello, World!")
+  </script>
+</body>
+</html>
+```
+
+Save and open this file up in a web browser (you can use <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" >"Live Server" on Visual Studio Code</a> to do this!) and then open up the browser’s console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of our `console.log` statement.
+
+> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.
+
+Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.
+
+```html
+  <script src="javascript.js"></script>
+```
+
+JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts.
+
+# --question--
+
+## --text--
+
+Which statement accurately describes how to include JavaScript in an HTML document?
+
+## --answers--
+
+JavaScript can only be included internally within a `<script>` tag in the HTML body.
+
+---
+
+JavaScript code must be written in the `<head>` section of an HTML document for it to execute properly.
+
+---
+
+JavaScript can be included directly in an HTML file using a `<script>` tag or linked externally via a `<script src="javascript.js">` tag.
+
+---
+
+External JavaScript files require a special attribute in the `<script>` tag to be recognized by web browsers.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
new file mode 100644
index 00000000000..cdc7c40d309
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-b.md
@@ -0,0 +1,65 @@
+---
+id: 65e18d61500d930ce8ed90a5
+title: Learn Variables and Operators Lesson B
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-b
+---
+
+# --description--
+
+You can think of variables as "storage containers" for data in your code.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/variables-and-operators/top-learn-variables-and-operators.png" alt='the concept of variables in coding as boxes labeled "birthday" that store and provide access to data, specifically a date "16-09-2003"' />
+
+A variable is a "named storage" for data. You can use variables to store goodies, visitors, and other data.
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in other words: declares) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now, you can put some data into it by using the assignment operator `=`:
+
+```js
+let message;
+
+// store the string 'Hello' in the variable named message
+message = 'Hello'; 
+```
+
+To be concise, you can combine the variable declaration and assignment into a single line:
+
+```js
+let message = 'Hello';
+```
+
+
+# --question--
+
+## --text--
+
+What is the purpose of using the `let` keyword in JavaScript?
+
+## --answers--
+
+To perform mathematical operations.
+
+---
+
+To declare a constant value that cannot be changed.
+
+---
+
+To declare a variable that can store data, which can be assigned and changed.
+
+---
+
+To create a function.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
new file mode 100644
index 00000000000..2555481fa06
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -0,0 +1,51 @@
+---
+id: 65e1957a500d930ce8ed90a6
+title: Learn Variables and Operators Lesson C
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-c
+---
+
+# --description--
+
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+
+```javascript
+const myBirthday = '16-09-2003';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```javascript
+const myBirthday = '16-09-2003';
+
+myBirthday = '01-01-2001'; // error, can't reassign the constant!
+```
+
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+
+# --question--
+
+## --text--
+
+What is the result of attempting to reassign a `const` declared variable in JavaScript?
+
+## --answers--
+
+The reassignment succeeds with no errors.
+
+---
+
+An error is thrown because `const` declared variables cannot be reassigned.
+
+---
+
+JavaScript silently ignores the reassignment.
+
+---
+
+The variable type is automatically changed to `let`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
new file mode 100644
index 00000000000..10928ef83a8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-d.md
@@ -0,0 +1,66 @@
+---
+id: 65e1985e500d930ce8ed90a7
+title: Learn Variables and Operators Lesson D
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-d
+---
+
+# --description--
+
+There are two limitations on variable names in JavaScript:
+
+1. The name must contain only letters, digits, or the symbols `$` and `_`.
+1. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+let test123;
+```
+
+What’s interesting – the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+# --question--
+
+## --text--
+
+Which of the following is a valid JavaScript variable name?
+
+## --answers--
+
+`let 2things;`
+
+---
+
+`let my-name;`
+
+---
+
+`let var!;`
+
+---
+
+`let $myVar;`
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
new file mode 100644
index 00000000000..10c41793245
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-e.md
@@ -0,0 +1,51 @@
+---
+id: 65e19bc3500d930ce8ed90a8
+title: Learn Variables and Operators Lesson E
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-e
+---
+
+# --description--
+
+Numbers are the building blocks of programming logic! In fact, it’s hard to think of any useful programming task that doesn’t involve at least a little basic math… so knowing how numbers work is obviously quite important. Luckily, it’s also fairly straightforward.
+
+| Operator | Description    | Example      |
+| -------- | -------------- | ------------ |
+| +        | Addition       | 5 + 3 = 8    |
+| -        | Subtraction    | 5 - 3 = 2    |
+| *        | Multiplication | 5 * 3 = 15   |
+| **       | Exponentiation | 5 ** 3 = 125 |
+| /        | Division       | 6 / 3 = 2    |
+| %        | Modulus        | 5 % 3 = 2    |
+
+
+# --assignment--
+
+Given the table of operators above, write a simple program snippet that demonstrates the use of each operator with the variable `x` initialized to `10`.
+
+# --question--
+
+## --text--
+
+What is the result of applying the modulus operator to `x` where `x = 10`?
+
+## --answers--
+
+`x % 3` results in `1`
+
+---
+
+`x % 3` results in `3`
+
+---
+
+`x % 3` results in `0`
+
+---
+
+`x % 3` results in `2`
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
new file mode 100644
index 00000000000..11e2c2e7cf5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-f.md
@@ -0,0 +1,82 @@
+---
+id: 65e1a2ea500d930ce8ed90a9
+title: Learn Variables and Operators Lesson F
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-f
+---
+
+# --description--
+
+Let’s meet the features of JavaScript operators that are beyond school arithmetics.
+
+Usually, the plus operator `+` sums numbers.
+
+But, if the binary `+` is applied to strings, it merges (concatenates) them:
+
+```js
+let s = "my" + "string";
+console.log(s); // mystring
+```
+
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+
+```js
+console.log(1 + '2'); // '12'
+console.log('1' + 2); // '12'
+```
+
+See, it doesn’t matter whether the first operand is a string or the second one.
+
+Here’s a more complex example:
+
+```js
+console.log(2 + 2 + '1') // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+`   adds the string `1` to it, so it’s like `4 + '1' = '41'`.
+
+```js
+console.log('1' + 2 + 2) // "122" and not "14"
+```
+
+Here, the first `+` concatenates the string and the number, so it returns `'12'`, then the next `+` adds `2` to it, so it’s like `'12' + 2 = '122'`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here’s the demo for subtraction and division:
+
+```js
+console.log( 6 - '2' ); // 4, converts '2' to a number
+console.log( '6' / '2' ); // 3, converts both operands to numbers
+```
+
+# --question--
+
+## --text--
+Considering the behavior of the `+` operator with mixed data types in JavaScript, what will be the output of the following code snippet?
+
+```js
+console.log('3' + 2 - 1);
+```
+
+## --answers--
+
+`31`, because the `+` operator concatenates the string and number before subtraction.
+
+---
+
+`32`, because `+` concatenates the string and number before subtraction.
+
+---
+
+`4`, because all operands are converted to numbers first.
+
+---
+
+`321`, because the `-` operator is not supported with strings.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
new file mode 100644
index 00000000000..da3ca683fb0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-g.md
@@ -0,0 +1,81 @@
+---
+id: 65e1aaf8500d930ce8ed90aa
+title: Learn Variables and Operators Lesson G
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-g
+---
+
+# --description--
+
+The plus `+` exists in two forms: the binary form that you used in the last challenge and the unary form.
+
+The unary plus or, in other words, the plus operator `+` applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.
+
+For example:
+
+```js
+// No effect on numbers
+let x = 1;
+console.log( +x ); // 1
+
+let y = -2;
+console.log( +y ); // -2
+
+// Converts non-numbers
+console.log( +true ); // 1
+console.log( +"" );   //
+```
+
+The need to convert strings to numbers arises very often. For example, if you are getting values from HTML form fields, they are usually strings. What if you want to sum them?
+
+The binary plus would add them as strings:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+alert( apples + oranges ); // "23", the binary plus concatenates strings
+```
+
+If you want to treat them as numbers, you need to convert and then sum them:
+
+```js
+let apples = "2";
+let oranges = "3";
+
+// both values converted to numbers before the binary plus
+alert( +apples + +oranges ); // 5
+
+// the longer variant
+// alert( Number(apples) + Number(oranges) ); // 5
+```
+
+From a mathematician’s standpoint, the abundance of pluses may seem strange. But from a programmer’s standpoint, there’s nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up.
+
+Why are unary pluses applied to values before the binary ones? As you’re going to see, that’s because of their _higher_ precedence.
+
+# --question--
+
+## --text--
+Given the explanation of unary and binary `+` operators in JavaScript, how can you correctly sum the string values `'2'` and `'3'` as numbers using unary `+`?
+
+## --answers--
+
+`console.log('2' + '3'); // Outputs: '23'`
+
+---
+
+`console.log(+2 + +3); // Outputs: 5`
+
+---
+
+`console.log(+'2' + +'3'); // Outputs: 5`
+
+---
+
+`console.log(Number('2') + Number('3')); // Outputs: '23'`
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
new file mode 100644
index 00000000000..f771234359b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-h.md
@@ -0,0 +1,61 @@
+---
+id: 65e1aedc500d930ce8ed90ac
+title: Learn Variables and Operators Lesson H
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-h
+---
+
+# --description--
+
+If an expression has more than one operator, the execution order is defined by their precedence, or, in other words, the default priority order of operators.
+
+From school, you know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That’s exactly the precedence thing. The multiplication is said to have a higher precedence than the addition.
+
+Parentheses override any precedence, so if you’re not satisfied with the default order, you can use them to change it. For example, write `(1 + 2) * 2`.
+
+There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.
+
+Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name           | Sign |
+| ---------- | -------------- | ---- |
+| ...        | ...            | ...  |
+| 14         | unary plus     | +    |
+| 14         | unary negation | -    |
+| 13         | exponentiation | **   |
+| 12         | multiplication | *    |
+| 12         | division       | /    |
+| 11         | addition       | +    |
+| 11         | subtraction    | -    |
+| ...        | ...            | ...  |
+| 2          | assignment     | =    |
+| ...        | ...            | ...  |
+
+
+
+# --question--
+
+## --text--
+
+When dealing with multiple operators in a JavaScript expression, which statement is true regarding the order of execution?
+
+## --answers--
+
+Operators are executed from right to left, regardless of their precedence.
+
+---
+
+Operators with higher precedence are executed first, and parentheses can override the predefined precedence.
+
+---
+
+The operator precedence is determined by the operator's speed of execution.
+
+---
+
+Multiplication always takes precedence over addition, and unary operators are executed after binary ones.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
new file mode 100644
index 00000000000..3e8bf1ce09a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-i.md
@@ -0,0 +1,116 @@
+---
+id: 65e1b46e500d930ce8ed90ad
+title: Learn Variables and Operators Lesson I
+challengeType: 15
+dashedName: learn-variables-and-operators-lesson-i
+---
+
+# --description--
+
+Increasing or decreasing a number by one is among the most common numerical operations.
+
+So, there are special operators for it:
+
+- Increment `++` increases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter + 1, but is shorter
+counter++;      
+
+console.log(counter); // 3
+```
+
+- Decrement `--` decreases a variable by 1:
+
+```js
+let counter = 2;
+
+// works the same as counter = counter - 1, but is shorter
+counter--;
+
+console.log(counter); // 1
+```
+
+The operators `++` and `--` can be placed either before or after a variable.
+
+- When the operator goes after the variable, it is in "postfix form": `counter++`.
+
+- The "prefix form" is when the operator goes before the variable: `++counter`.
+
+Both of these statements do the same thing: increase `counter` by `1`.
+
+Is there any difference? Yes, but you can only see it if you use the returned value of `++/--`  .
+
+Let’s clarify. As you know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement).
+
+To see the difference, here’s an example:
+
+```js
+let counter = 1;
+let a = ++counter; // (*)
+
+console.log(a); // 2
+```
+
+To summarize:
+
+- If the result of increment/decrement is not used, there is no difference in which form to use:
+
+```js
+let counter = 0;
+counter++;
+++counter;
+
+console.log( counter ); // 2, the lines above did the same
+```
+
+- If you’d like to increase a value and immediately use the result of the operator, you need the prefix form:
+
+```js
+let counter = 0;
+console.log( ++counter ); // 1
+```
+
+- If you’d like to increment a value but use its previous value, you need the postfix form:
+
+```js 
+let counter = 0;
+console.log( counter++ ); // 0
+```
+
+# --question--
+
+## --text--
+
+What is the difference in the result of the two console log statements in the JavaScript code below?
+
+```js
+let counter = 1;
+console.log(2 * ++counter); // Statement A
+
+let counter = 1;
+console.log(2 * counter++); // Statement B
+```
+
+## --answers--
+
+There is no difference; both alert statements will show the same result.
+
+---
+
+Statement A will log `4` because `++counter` increments the value before the multiplication. Statement B will log `2` because `counter++` increments the value after the multiplication.
+
+---
+
+Statement A will log `2` because `++counter` is a syntax error. Statement B will log `4` because `counter++` is the correct way to increment a counter.
+
+---
+
+Both statements will log `3` because the counter is incremented in both cases before the `console.log`.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
new file mode 100644
index 00000000000..ca0dd6762c0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-a.md
@@ -0,0 +1,68 @@
+---
+id: 637f704072c65bc8e73dfe36
+videoId: tsEQgGjSmkM
+title: Links and Images Lesson A
+challengeType: 15
+dashedName: links-and-images-lesson-a
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Links video above.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create a link?
+
+## --answers--
+
+`<a>`
+
+---
+
+`<p>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
new file mode 100644
index 00000000000..7039766863f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-b.md
@@ -0,0 +1,62 @@
+---
+id: 637f703572c65bc8e73dfe35
+title: Links and Images Lesson B
+challengeType: 15
+dashedName: links-and-images-lesson-b
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+## --text--
+
+What is an attribute?
+## --answers--
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag.
+
+---
+
+An HTML attribute is used to tell the browser what the element contains.
+
+---
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
new file mode 100644
index 00000000000..4f1440bc5f3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -0,0 +1,63 @@
+---
+id: 637f703072c65bc8e73dfe34
+title: Links and Images Lesson C
+challengeType: 15
+dashedName: links-and-images-lesson-c
+---
+
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named `odin-links-and-images`.
+
+- Within that directory, create a new file named `index.html`.
+
+- Fill in the usual HTML boilerplate.
+
+- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+
+## Anchor Elements
+To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+
+Add the following to the `body` of the `index.html` page you created and open it in the browser:
+
+```html
+<a>click me</a>
+```
+
+You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+
+An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+
+Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+
+```html
+<a href="https://www.theodinproject.com/about">click me</a>
+```
+
+By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+
+It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+
+# --question--
+
+## --text--
+
+What attribute tells links where to go to?
+
+## --answers--
+
+`src`
+
+---
+
+`href`
+
+---
+
+`link`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
new file mode 100644
index 00000000000..69bbd58d2da
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -0,0 +1,112 @@
+---
+id: 637f702872c65bc8e73dfe33
+videoId: ta3Oxx7Yqbo
+title: Links and Images Lesson D
+challengeType: 15
+dashedName: links-and-images-lesson-d
+---
+
+# --description--
+
+
+Generally, there are two kinds of links you will create:
+
+- Links to pages on other websites on the internet
+
+- Links to pages located on your own websites
+
+
+## Absolute Links
+Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+
+You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+
+`https://www.theodinproject.com/about`
+
+## Relative Links
+Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+
+Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+
+Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Odin Links and Images</title>
+  </head>
+
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>
+```
+
+Back in the `index` page, add the following anchor element to create a link to the `about` page:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="about.html">About</a>
+</body>
+```
+
+Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+
+This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+
+But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+
+Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+
+Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+
+To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="pages/about.html">About</a>
+</body>
+```
+
+Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+
+In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+
+```html
+<body>
+  <h1>Homepage</h1>
+  <a href="./pages/about.html">About</a>
+</body>
+```
+
+# --assignment--
+
+Watch Kevin Powell’s HTML File Structure video above.
+
+# --question--
+
+## --text--
+
+What is the difference between an absolute and a relative link?
+
+## --answers--
+
+An absolute link is a link to another page on the current website. A relative link is a link to another website.
+
+---
+
+An absolute link is a link to another website. A relative link is a link another page on the current website.
+
+---
+
+There is no difference between absolute and relative links.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
new file mode 100644
index 00000000000..eb4b15a8d54
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -0,0 +1,98 @@
+---
+id: 637f702372c65bc8e73dfe32
+videoId: 0xoztJCHpbQ
+title: Links and Images Lesson E
+challengeType: 15
+dashedName: links-and-images-lesson-e
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the `images` directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+# --question--
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+`<link>`
+
+---
+
+`<a>`
+
+---
+
+`<img>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
new file mode 100644
index 00000000000..5ea069897aa
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -0,0 +1,93 @@
+---
+id: 637f701c72c65bc8e73dfe31
+title: Links and Images Lesson F
+challengeType: 15
+dashedName: links-and-images-lesson-f
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
new file mode 100644
index 00000000000..71bdf4add9b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+title: Links and Images Lesson G
+challengeType: 15
+dashedName: links-and-images-lesson-g
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
new file mode 100644
index 00000000000..2f78b640e8f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+title: Links and Images Lesson H
+challengeType: 15
+dashedName: links-and-images-lesson-h
+---
+
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `<img>` element. Unlike the other elements you have encountered, the `<img>` element is self-closing. Empty, self-closing HTML elements do not need a closing tag.
+
+Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths.
+
+For example, using an absolute path you can display an image located on The Odin Project site:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/gORbExZ?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=gORbExZ&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_gORbExZ"></iframe>
+
+To use images that you have on your own websites, you can use a relative path.
+
+- Create a new directory named `images` within the `odin-links-and-images` project.
+
+- Next, download <a href="https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640" target="_blank">this image</a> and move it into the images directory you just created.
+
+- Rename the image to `dog.jpg`.
+
+Finally add the image to the `index.html` file:
+
+```html
+<body>
+  <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="pages/about.html">About</a>
+
+    <img src="images/dog.jpg">
+</body>
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+<img src="../images/dog.jpg">
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/ExXjoEp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=ExXjoEp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_ExXjoEp"></iframe>
+
+# --assignment--
+
+Read about the <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank">four main image formats</a> that can be used on the web.
+
+# --question--
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+MOV, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
new file mode 100644
index 00000000000..a5b1babdd77
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-a.md
@@ -0,0 +1,45 @@
+---
+id: 64a5529c02815a7d323aab88
+title: The Box Model Lesson A
+challengeType: 15
+dashedName: the-box-model-lesson-a
+---
+
+# --description--
+
+Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code.
+
+To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press F12. Go ahead and do that right now to see the HTML and CSS used on this page.
+
+Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which panes should you focus on in the Chrome Dev Tools for inspecting and debugging HTML and CSS?
+
+## --answers--
+
+Console and Network
+
+---
+
+Elements and Styles
+
+---
+
+Sources and Application
+
+---
+
+Performance and Memory
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
new file mode 100644
index 00000000000..802fed2ac2f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-b.md
@@ -0,0 +1,42 @@
+---
+id: 64a553ed02815a7d323aab89
+title: The Box Model Lesson B
+challengeType: 15
+dashedName: the-box-model-lesson-b
+---
+
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --question--
+
+## --text--
+
+When inspecting an element in the Chrome Dev Tools, if a style property is shown with a strikethrough, what does it indicate?
+
+## --answers--
+
+The style property is currently disabled and not applied to the element.
+
+---
+
+The style property is overridden by a more specific CSS rule.
+
+---
+
+The style property is deprecated and should not be used.
+
+---
+
+The style property is experimental and may not be supported by all browsers
+
+## --video-solution--
+
+2   
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
new file mode 100644
index 00000000000..76ff0d4c362
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-c.md
@@ -0,0 +1,46 @@
+---
+id: 64a5551d02815a7d323aab8a
+title: The Box Model Lesson C
+challengeType: 15
+dashedName: the-box-model-lesson-c
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+Which feature in the Elements pane allows you to select any element on a webpage by hovering over it?
+
+## --answers--
+
+Blue-highlighted icon
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+HTML structure view
+
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
new file mode 100644
index 00000000000..c22f53661be
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-d.md
@@ -0,0 +1,45 @@
+---
+id: 64a55a6102815a7d323aab8b
+title: The Box Model Lesson D
+challengeType: 15
+dashedName: the-box-model-lesson-d
+--- 
+# --description--
+
+In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="Aweb development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles." />
+
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">the The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden." />
+# --assignment--
+
+Play around with Chrome Dev Tools and see if you can answer the following question.
+
+# --question--
+
+## --text--
+
+In the Styles pane, what information can you view about an element when it is selected?
+
+## --answers--
+
+HTML structure and CSS rules
+
+---
+
+Styles tab
+
+---
+
+Inspector tab
+
+---
+
+Applied styles and overwritten styles.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
new file mode 100644
index 00000000000..e2b9e44febc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-e.md
@@ -0,0 +1,38 @@
+---
+id: 64a669f77a7d00f97013ed0c
+title: The Box Model Lesson E
+challengeType: 15
+dashedName: the-box-model-lesson-e
+--- 
+# --description--
+
+Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?
+
+Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, (and funny gifs) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.
+
+# --question--
+
+## --text--
+
+Why is it important to have a solid understanding of CSS in web development?
+
+## --answers--
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It allows you to create complex animations and interactive effects.
+
+---
+
+It helps in optimizing database queries for improved performance.
+
+---
+
+It enables you to style and design webpages with precision and control.
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
new file mode 100644
index 00000000000..4cbbaec8343
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-f.md
@@ -0,0 +1,48 @@
+---
+id: 64a66c917a7d00f97013ed0d
+title: The Box Model Lesson F
+challengeType: 15
+dashedName: the-box-model-lesson-f
+--- 
+# --description--
+
+The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:
+
+```css
+* {
+  border: 1px solid red;
+}
+```
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?
+
+## --answers--
+
+Box-sizing
+
+---
+
+Box-shadow
+
+---
+
+Box model
+
+---
+
+Border-box
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
new file mode 100644
index 00000000000..ab042ee7f3b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-g.md
@@ -0,0 +1,52 @@
+---
+id: 64a6702e7a7d00f97013ed0e
+title: The Box Model Lesson G
+challengeType: 15
+dashedName: the-box-model-lesson-g
+--- 
+# --description--
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="an image showing the odin project website surrounded by red borders indicating that the site is build out of multiple components" style="width: 95%; height: 95%;" />
+
+OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.
+
+The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding, margin, and border. But to sum it up briefly:
+
+- `padding` increases the space between the border of a box and the content of the box.
+- `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+- `border` adds space (even if it’s only a pixel or two) between the margin and the padding.
+
+Be sure to study the diagrams carefully.
+
+<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Visual representation of CSS box model with text, surrounded by 'padding' in pink, a purple 'border', and 'margin' indicated by blue arrows, explaining space between text, box edge, and window edge." />
+
+# --assignment--
+
+Add a border to every element on the page and see how the boxes are laid out.
+
+# --question--
+
+## --text--
+
+From inside to outside, what is the order of box-model properties?
+
+## --answers--
+
+Content, Margin, Padding, Border
+
+---
+
+Margin, Padding, Content, Border
+
+---
+
+Content, Padding, Border, Margin
+
+---
+
+Padding, Content, Border, Margin
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
new file mode 100644
index 00000000000..5423c67fb5c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-h.md
@@ -0,0 +1,37 @@
+---
+id: 64a674937a7d00f97013ed0f
+videoId: rIO5326FgPE
+title: The Box Model Lesson H
+challengeType: 15
+dashedName: the-box-model-lesson-h
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What does the box-sizing CSS property do?
+
+## --answers--
+
+It determines the order of the box-model properties.
+
+---
+
+It specifies the position of an element on the webpage.
+
+---
+
+It controls how the total width and height of an element are calculated.
+
+---
+
+It sets the background color of an element.
+
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
new file mode 100644
index 00000000000..0f70fbcec65
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-i.md
@@ -0,0 +1,36 @@
+---
+id: 64a6749a7a7d00f97013ed10
+videoId: rIO5326FgPE
+title: The Box Model Lesson I
+challengeType: 15
+dashedName: the-box-model-lesson-i
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+What is the difference between the standard and alternative box model?
+
+## --answers--
+
+The standard box model calculates the width and height of an element based on the content alone, while the alternative box model calculates based on the content plus padding and border.
+
+---
+
+The standard box model includes content, padding, and border, while the alternative box model includes only the content.
+
+---
+
+The standard box model and the alternative box model are the same and have no differences.
+
+---
+
+The standard box model includes only the content, while the alternative box model includes content, padding, and border.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
new file mode 100644
index 00000000000..1b311df62dd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-j.md
@@ -0,0 +1,37 @@
+---
+id: 64a674a47a7d00f97013ed11
+videoId: rIO5326FgPE
+title: The Box Model Lesson J
+challengeType: 15
+dashedName: the-box-model-lesson-j
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding to create more space between 2 elements?
+
+## --answers--
+
+Padding
+
+---
+
+Both margin and padding can be used interchangeably
+
+---
+
+Neither margin nor padding can be used to create more space between elements
+
+---
+
+Margin
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
new file mode 100644
index 00000000000..b782f8bb4f9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-k.md
@@ -0,0 +1,36 @@
+---
+id: 64a674ac7a7d00f97013ed12
+videoId: rIO5326FgPE
+title: The Box Model Lesson K
+challengeType: 15
+dashedName: the-box-model-lesson-k
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Which CSS property would you use to create more space between the contents of an element and its border?
+
+## --answers--
+
+Margin
+
+---
+
+Padding
+
+---
+
+Border
+
+---
+
+Float
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
new file mode 100644
index 00000000000..e86aa50c732
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-l.md
@@ -0,0 +1,28 @@
+---
+id: 64a674b97a7d00f97013ed13
+videoId: rIO5326FgPE
+title: The Box Model Lesson L
+challengeType: 15
+dashedName: the-box-model-lesson-l
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+Would you use margin or padding if you wanted two elements to overlap each other?
+
+## --answers--
+
+Padding
+
+---
+
+Margin
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
new file mode 100644
index 00000000000..d7296f95901
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-the-box-model/the-box-model-lesson-m.md
@@ -0,0 +1,67 @@
+---
+id: 64a674c27a7d00f97013ed14
+videoId: rIO5326FgPE
+title: The Box Model Lesson M
+challengeType: 15
+dashedName: the-box-model-lesson-m
+--- 
+# --description--
+
+Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model" target="_blank">this lesson from MDN</a>. It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+
+# --question--
+
+## --text--
+
+How do you set the alternative box model for all of your elements?
+
+## --answers--
+
+```css
+html {
+    box-sizing: inherit;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+* {
+    box-sizing: border-box;
+}
+```
+
+---
+
+```css
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+```
+
+---
+
+```css
+html {
+    box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+```
+
+
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
new file mode 100644
index 00000000000..e44f4fa7533
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-a.md
@@ -0,0 +1,60 @@
+---
+id: 637f4e5872c65bc8e73dfe27
+videoId: yqcd-XkxZNM
+title: Working With Text Lesson A
+challengeType: 15
+dashedName: working-with-text-lesson-a
+---
+
+# --description--
+
+What would you expect the following text to output on an HTML page?
+
+```html
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+
+  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+  nisi ut aliquip ex ea commodo consequat.
+</body>
+```
+
+It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/xxrKqeV?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=xxrKqeV&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_xxrKqeV"></iframe>
+
+When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
+
+If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `<p>` tag.
+
+Changing our example from before to use paragraph elements fixes the issue:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/mdwbmdp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=mdwbmdp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_mdwbmdp"></iframe>
+
+# --assignment--
+
+Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above.
+
+# --question--
+
+## --text--
+
+How do you create a paragraph in HTML?
+
+## --answers--
+
+`<h3>This is a paragraph</h3>`
+
+---
+
+`<p>This is a paragraph</p>`
+
+---
+
+`<strong>This is a paragraph<strong>`
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
new file mode 100644
index 00000000000..390147c9623
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-b.md
@@ -0,0 +1,39 @@
+---
+id: 637f4e5f72c65bc8e73dfe28
+title: Working With Text Lesson B
+challengeType: 15
+dashedName: working-with-text-lesson-b
+---
+
+# --description--
+
+Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.
+
+There are 6 different levels of headings starting from `<h1>` to `<h6>`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level.
+
+Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `<h1>` tag.
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_3" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/LYLPLbg?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=LYLPLbg&amp;user=TheOdinProjectExamples&amp;name=cp_embed_3" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_LYLPLbg"></iframe>
+
+Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.
+
+# --question--
+## --text--
+
+How many different levels of headings are there and what is the difference between them?
+
+## --answers--
+
+There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading.
+
+---
+
+There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading.
+
+---
+
+There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
new file mode 100644
index 00000000000..8dee0883bbf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-c.md
@@ -0,0 +1,47 @@
+---
+id: 637f4e6672c65bc8e73dfe29
+videoId: gW6cBZLUk6M
+title: Working With Text Lesson C
+challengeType: 15
+dashedName: working-with-text-lesson-c
+---
+
+# --description--
+
+The `<strong>` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `<strong>` tag.
+
+You can use `strong` on its own:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_4" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/qBjWXrB?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=qBjWXrB&amp;user=TheOdinProjectExamples&amp;name=cp_embed_4" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_qBjWXrB"></iframe>
+
+But you will probably find yourself using the `strong` element much more in combination with other text elements, like this:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_5" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqJr?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqJr&amp;user=TheOdinProjectExamples&amp;name=cp_embed_5" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqJr"></iframe>
+
+Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.
+
+# --assignment--
+
+Watch Kevin Powell’s HTML Bold and Italic Text Video above.
+
+# --question--
+
+## --text--
+
+What element should you use to make text bold and important?
+
+## --answers--
+
+`<em>This is an important message</em>`
+
+---
+
+`<h1>This is an important message</h1>`
+
+---
+
+`<strong>This is an important message</strong>`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
new file mode 100644
index 00000000000..0e03f073189
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-d.md
@@ -0,0 +1,38 @@
+---
+id: 637f4e6e72c65bc8e73dfe2a
+title: Working With Text Lesson D
+challengeType: 15
+dashedName: working-with-text-lesson-d
+---
+
+# --description--
+
+The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag.
+
+To use `em` on its own:
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=wvewqpp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>
+
+Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_7" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/VwWZzyj?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=VwWZzyj&amp;user=TheOdinProjectExamples&amp;name=cp_embed_7" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_VwWZzyj"></iframe>
+
+# --question--
+## --text--
+
+What element should you use to make text italicized to add emphasis?
+
+## --answers--
+
+`<strong>This is an italic message</strong>`
+
+---
+
+`<em>This is an italic message</em>`
+
+---
+
+`<italic>This is an italic message</italic>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
new file mode 100644
index 00000000000..22f949e26f5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-e.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e7972c65bc8e73dfe2b
+title: Working With Text Lesson E
+challengeType: 15
+dashedName: working-with-text-lesson-e
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the `body` element is the parent and the `p` is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship do two elements have if they are at the same level of nesting?
+
+## --answers--
+
+The elements are each other's parents.
+
+---
+
+The elements are each other's children.
+
+---
+
+The elements are siblings.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
new file mode 100644
index 00000000000..14c3d7faf08
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-f.md
@@ -0,0 +1,66 @@
+---
+id: 637f4e8072c65bc8e73dfe2c
+title: Working With Text Lesson F
+challengeType: 15
+dashedName: working-with-text-lesson-f
+---
+
+# --description--
+
+You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements.
+
+When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.
+
+In the following example, the body element is the parent and the paragraph is the child:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+  </body>
+ </html>
+```
+
+Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.
+
+For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:
+
+```html
+<html>
+  <head>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet.</p>
+    <p>Ut enim ad minim veniam.</p>
+  </body>
+ </html>
+```
+
+You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces.
+
+The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.
+
+# --question--
+
+## --text--
+
+What relationship does an element have with any nested element within it?
+
+## --answers--
+
+The element within the other element is called the parent element.
+
+---
+
+The element within the other element is called the child element.
+
+---
+
+The element within the other element is called the sibling element.
+
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
new file mode 100644
index 00000000000..1452e57ff48
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-g.md
@@ -0,0 +1,48 @@
+---
+id: 637f4e8772c65bc8e73dfe2d
+title: Working With Text Lesson G
+challengeType: 15
+dashedName: working-with-text-lesson-g
+---
+
+# --description--
+
+HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code.
+
+Writing an HTML comment is simple: You just enclose the comment with `<!--` and `-->`tags. For example:
+
+```html
+<h1> View the html to see the hidden comments </h1>
+
+<!-- I am a html comment -->
+
+<p>Some paragraph text</p>
+
+<!-- I am another html comment -->
+```
+
+# --assignment--
+
+To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites.
+
+# --question--
+
+## --text--
+
+How do you create HTML comments?
+
+## --answers--
+
+`/* This is an HTML comment */`
+
+---
+
+`<!-- This is an HTML comment -->`
+
+---
+
+`<-- This is an HTML comment --!>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
new file mode 100644
index 00000000000..5d2c495870b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-h.md
@@ -0,0 +1,65 @@
+---
+id: 637f4e3e72c65bc8e73dfe24
+videoId: kcHKFZBVtf4
+title: Working With Text Lesson H
+challengeType: 15
+dashedName: working-with-text-lesson-h
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --assignment--
+
+Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.
+
+---
+
+Make an unordered shopping list of your favorite foods.
+
+---
+
+Make an ordered list of todo’s you need to get done today.
+
+---
+
+Make an unordered list of places you’d like to visit someday.
+
+---
+
+Make an ordered list of your all time top 5 favorite video games or movies.
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an unordered list?
+
+## --answers--
+
+`<li>`
+
+---
+
+`<ul>`
+
+---
+
+`<ol>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
new file mode 100644
index 00000000000..fa63ea5db4b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e4672c65bc8e73dfe25
+title: Working With Text Lesson I
+challengeType: 15
+dashedName: working-with-text-lesson-i
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create an ordered list?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
new file mode 100644
index 00000000000..928259c7535
--- /dev/null
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-j.md
@@ -0,0 +1,44 @@
+---
+id: 637f4e5172c65bc8e73dfe26
+title: Working With Text Lesson J
+challengeType: 15
+dashedName: working-with-text-lesson-j
+---
+
+# --description--
+
+If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+
+Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+
+Each list item in an unordered list begins with a bullet point:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+
+If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+
+Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+
+# --question--
+
+## --text--
+
+What HTML tag is used to create list items within both unordered and ordered lists?
+
+## --answers--
+
+`<ol>`
+
+---
+
+`<li>`
+
+---
+
+`<ul>`
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606682f3fbb93838673920d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606682f3fbb93838673920d.md
index bfe0d7df9ac..2d16c2ea7ed 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606682f3fbb93838673920d.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606682f3fbb93838673920d.md
@@ -1,6 +1,6 @@
 ---
 id: 6606682f3fbb93838673920d
-title: "Dialogue 1: Analyzing API Documentation"
+title: "Діалог 1: аналіз документації по API"
 challengeType: 21
 dashedName: dialogue-1-analyzing-api-documentation
 ---
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66066c563917c5874b792337.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66066c563917c5874b792337.md
index ad58b16d018..017a06b2f21 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66066c563917c5874b792337.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66066c563917c5874b792337.md
@@ -9,9 +9,9 @@ dashedName: task-1
 
 # --description--
 
-An `API` (Application Programming Interface) is a set of rules and tools for building software applications. It's like a bridge that allows different software programs to communicate with each other. For example, `The weather app uses an API to get data from the weather service.`
+`API` (прикладний програмний інтерфейс) — це набір правил та інструментів для створення програмних застосунків. Це ніби міст, який дозволяє взаємодіяти різним програмам. Наприклад, `The weather app uses an API to get data from the weather service`.
 
-An `approach` is a way of considering or doing something. Like, `Her approach to solving the problem was very creative.`
+`Approach` — це спосіб щось роздумувати чи робити. Наприклад, `Her approach to solving the problem was very creative`.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ An `approach` is a way of considering or doing something. Like, `Her approach to
 
 ### --feedback--
 
-It means a set of rules and tools that allows different software to interact.
+Це слово позначає набір правил та інструментів, які дозволяють взаємодіяти програмним забезпеченням.
 
 ---
 
@@ -33,7 +33,7 @@ It means a set of rules and tools that allows different software to interact.
 
 ### --feedback--
 
-It's a method or way of doing something. Sophie is asking for the best way to analyze the API's documentation.
+Метод чи спосіб щось робити. Софі запитує про найкращий спосіб аналізу документації API.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660681a717d84e89da14f6f4.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660681a717d84e89da14f6f4.md
index 3d23ed616e9..4ba587f096e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660681a717d84e89da14f6f4.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660681a717d84e89da14f6f4.md
@@ -9,41 +9,41 @@ dashedName: task-2
 
 # --description--
 
-Another way of saying that you are `not sure about something` is to say that you are `unsure about it`. It means not being certain or having confidence about something.
+Якщо ви `not sure about something`, можете також сказати, що ви `unsure about it`. Тобто ви не впевнені щодо чогось.
 
 # --question--
 
 ## --text--
 
-What is Sophie `unsure` about, and what does she want to know from Brian?
+Софі `unsure` щодо чогось і просить дещо в Браяна. Що вона хоче дізнатись від нього?
 
 ## --answers--
 
-About the purpose of the API
+Головне призначення API
 
 ### --feedback--
 
-It isn't about the API's purpose.
+Запитання не стосується мети API.
 
 ---
 
-About coding in general
+Про програмування загалом
 
 ### --feedback--
 
-Sophie's question is not about coding in general.
+Запитання Софі не стосується як такого програмування.
 
 ---
 
-About analyzing effectively the API's documentation
+Як ефективно аналізувати документацію API
 
 ---
 
-About knowing how to install the API
+Як встановити API
 
 ### --feedback--
 
-Sophie's concern is not about installing the API.
+Софі не турбується про встановлення API.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660682b572c0bb8aa3075feb.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660682b572c0bb8aa3075feb.md
index e669c0a43f8..b906301f8b9 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660682b572c0bb8aa3075feb.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660682b572c0bb8aa3075feb.md
@@ -9,11 +9,11 @@ dashedName: task-3
 
 # --description--
 
-An `endpoint` in an API is a specific location where you can request certain data or service. For example, `The API endpoint for weather data retrieves the latest forecasts.`
+`Endpoint` в API — це конкретна локація, де можна запитати певні дані або службу. Наприклад, `The API endpoint for weather data retrieves the latest forecasts`.
 
- To `offer` means to provide or make available. For instance, `This service offers real-time updates.`
+ `Offer` означає надавати щось або робити доступним. Наприклад, `This service offers real-time updates`.
 
-A `route` is a path defined in the API that determines how requests are handled. Like, `The login route verifies user credentials.`
+`Route` — це шлях, визначений API, який визначає спосіб обробки запитів. Наприклад, `The login route verifies user credentials`.
 
 # --fillInTheBlank--
 
@@ -27,7 +27,7 @@ A `route` is a path defined in the API that determines how requests are handled.
 
 ### --feedback--
 
-They are specific locations in an API where requests for data or services are made.
+Конкретні локації в API, де вносять запити про дані або служби.
 
 ---
 
@@ -35,7 +35,7 @@ They are specific locations in an API where requests for data or services are ma
 
 ### --feedback--
 
-They define the paths for handling requests in an API, determining how different requests are processed.
+Вони визначають шляхи обробки запитів у API, визначаючи спосіб їхньої обробки.
 
 ---
 
@@ -43,7 +43,7 @@ They define the paths for handling requests in an API, determining how different
 
 ### --feedback--
 
-It refers to what the API provides or makes available, like data or functionalities.
+Це стосується того, що API надає дані або робить їх доступними.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606838ecf64478b53a51496.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606838ecf64478b53a51496.md
index 6c4513fd323..d1de5d0332e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606838ecf64478b53a51496.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606838ecf64478b53a51496.md
@@ -15,35 +15,35 @@ dashedName: task-4
 
 ## --text--
 
-According to Brian, what should Sophie do first to understand what the API offers?
+З чого Браян порадив розпочати Софі, щоб зрозуміти, що пропонує API?
 
 ## --answers--
 
-Begin by checking the endpoints and routes in the documentation
+З перевірки кінцевих точок та маршрутів у документації
 
 ---
 
-Start by writing a summary of the entire documentation
+З написання конспекту всієї документації
 
 ### --feedback--
 
-While summarizing can be helpful, Brian specifically advises beginning with checking the endpoints and routes, not summarizing the documentation.
+Конспект може бути корисним, але Браян конкретно радить почати з перевірки кінцевих точок та маршрутів.
 
 ---
 
-Immediately implement the API in a project
+Негайно реалізувати API в проєкті
 
 ### --feedback--
 
-Brian suggests beginning with understanding the API's offerings by checking endpoints and routes, not immediately implementing it.
+Браян пропонує почати з розуміння можливостей API, перевіривши кінцеві точки та маршрути, а не одразу ж реалізуючи його.
 
 ---
 
-Focus on the API's security features first
+Спочатку зосередитись на функціях безпеки API
 
 ### --feedback--
 
-Brian's initial recommendation is about understanding the API's functionalities.
+Початкова рекомендація Браяна стосується розуміння функціоналу API.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660683e649f8fa8bbd5baac5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660683e649f8fa8bbd5baac5.md
index 161d864e934..d462220f4ff 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660683e649f8fa8bbd5baac5.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660683e649f8fa8bbd5baac5.md
@@ -23,7 +23,7 @@ dashedName: task-5
 
 ### --feedback--
 
-It is used here to ask for advice or a recommendation about the next step to take.
+Це слово використано, щоб запитати про пораду або рекомендацію щодо наступного кроку.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068414094b3a8c10a4770d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068414094b3a8c10a4770d.md
index e8d271bd12e..f36a1918be0 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068414094b3a8c10a4770d.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068414094b3a8c10a4770d.md
@@ -23,7 +23,7 @@ dashedName: task-6
 
 ### --feedback--
 
-It is short for `you have`. It's used here to mean once Sophie has identified the endpoints.
+Скорочена форма `you have`. У цьому реченні означає «як тільки Софі визначить кінцеві точки».
 
 ---
 
@@ -31,7 +31,7 @@ It is short for `you have`. It's used here to mean once Sophie has identified th
 
 ### --feedback--
 
-It means to look at words and understand what they mean.
+Глянути на слова та зрозуміти, що вони означають.
 
 ---
 
@@ -39,7 +39,7 @@ It means to look at words and understand what they mean.
 
 ### --feedback--
 
-It means to grasp the meaning or significance of something. Brian wants Sophie to grasp how the API works.
+Зрозуміти суть або значення чогось. Браян хоче, щоб Софі зрозуміла, як працює API.
 
 ---
 
@@ -47,7 +47,7 @@ It means to grasp the meaning or significance of something. Brian wants Sophie t
 
 ### --feedback--
 
-It stands for Application Programming Interface, a tool that allows software to interact.
+Абревіатура для прикладного програмного інтерфейсу.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606846eba453e8c7bacb2f7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606846eba453e8c7bacb2f7.md
index ab68d2d2e79..cdefa7d8160 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606846eba453e8c7bacb2f7.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606846eba453e8c7bacb2f7.md
@@ -15,35 +15,35 @@ dashedName: task-7
 
 ## --text--
 
-What is the order of actions Brian suggests Sophie should follow?
+Якого порядку дій пропонує дотримуватись Браян?
 
 ## --answers--
 
-First, use the API in a project, then read the descriptions and examples.
+Спочатку використати API в проєкті, а потім прочитати описи та приклади.
 
 ### --feedback--
 
-Brian's advice starts with identifying endpoints, not using the API in a project first.
+Браян пропонує спочатку визначити кінцеві точки, а не використовувати API в проєкті.
 
 ---
 
-First, identify the endpoints, then read their descriptions and examples.
+Спочатку визначити кінцеві точки, а потім прочитати описи та приклади.
 
 ---
 
-Read the descriptions and examples first, then identify the endpoints.
+Спочатку прочитати описи та приклади, а потім визначити кінцеві точки.
 
 ### --feedback--
 
-Brian suggests identifying the endpoints first, before reading their descriptions and examples.
+Браян пропонує визначити кінцеві точки перед тим, як читати описи та приклади.
 
 ---
 
-Ignore the endpoints and focus only on the examples.
+Ігнорувати кінцеві точки та фокусуватись лише на прикладах.
 
 ### --feedback--
 
-Brian emphasizes the importance of both identifying the endpoints and reading their descriptions and examples, not ignoring them.
+Браян наголошує на тому, як важливо визначити кінцеві точки та прочитати описи і приклади, а не ігнорувати їх.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660684bfc24bf48cfaaf9cfa.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660684bfc24bf48cfaaf9cfa.md
index ad630018cff..5390c8a8541 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660684bfc24bf48cfaaf9cfa.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660684bfc24bf48cfaaf9cfa.md
@@ -9,9 +9,9 @@ dashedName: task-8
 
 # --description--
 
-`Give it a shot` means to try doing something. It's like saying `Try it`.
+`Give it a shot` означає спробувати щось зробити. Це те ж саме, що й казати `Try it`.
 
-For example, if your friend is hesitant about joining a coding class because they think it might be too difficult, you could say `Why not give it a shot? You might enjoy it more than you think.` to encourage them to try joining this class.
+Наприклад, ваш друг не горить бажанням відвідувати курси з програмування, оскільки вони можуть бути важкими. Ви можете сказати `Why not give it a shot? You might enjoy it more than you think.`, щоб підбадьорити його.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ For example, if your friend is hesitant about joining a coding class because the
 
 ### --feedback--
 
-It is short for `I will`. Sophie is expressing her decision to try what Brian suggested.
+Скорочена форма `I will`. Софі каже, що вирішила зробити так, як запропонував Браян.
 
 ---
 
@@ -33,7 +33,7 @@ It is short for `I will`. Sophie is expressing her decision to try what Brian su
 
 ### --feedback--
 
-In this context, it means an attempt or try at doing something. Sophie is saying she will try what Brian has recommended.
+У цьому контексті це означає спробувати щось зробити. Софі каже, що спробує зробити те, що запропонував Браян.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660686845b5e788def3527ca.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660686845b5e788def3527ca.md
index 791ca52ac68..d60d86eedde 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660686845b5e788def3527ca.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660686845b5e788def3527ca.md
@@ -23,7 +23,7 @@ dashedName: task-9
 
 ### --feedback--
 
-It means to examine in detail. Sophie wants to understand how to look at the API documentation closely.
+Детально розглядати. Софі хоче зрозуміти, як правильно аналізувати документацію API.
 
 ---
 
@@ -31,7 +31,7 @@ It means to examine in detail. Sophie wants to understand how to look at the API
 
 ### --feedback--
 
-It means to start. Brian advises starting with the endpoints and routes.
+Розпочинати. Браян радить почати з кінцевих точок та маршрутів.
 
 ---
 
@@ -39,7 +39,7 @@ It means to start. Brian advises starting with the endpoints and routes.
 
 ### --feedback--
 
-They are specific locations where API requests are made. Brian mentions these as starting points.
+Конкретні місця, де здійснюються запити API. Браян згадує їх як початкові точки.
 
 ---
 
@@ -47,7 +47,7 @@ They are specific locations where API requests are made. Brian mentions these as
 
 ### --feedback--
 
-They are paths defined in the API for handling requests. They are key parts of the documentation.
+Шляхи, визначені в API для обробки запитів. Вони є ключовими частинами документації.
 
 ---
 
@@ -55,7 +55,7 @@ They are paths defined in the API for handling requests. They are key parts of t
 
 ### --feedback--
 
-It means recognized or discovered. Sophie needs to recognize the endpoints first.
+Визнані або виявлені. Софі потрібно спочатку визначити кінцеві точки.
 
 ---
 
@@ -63,7 +63,7 @@ It means recognized or discovered. Sophie needs to recognize the endpoints first
 
 ### --feedback--
 
-It means to look at and comprehend text. Brian suggests reading the details for each endpoint.
+Ознайомитися з текстом та зрозуміти його. Браян пропонує прочитати деталі кожної кінцевої точки.
 
 ---
 
@@ -71,7 +71,7 @@ It means to look at and comprehend text. Brian suggests reading the details for
 
 ### --feedback--
 
-They give details about something. Sophie should read the details about each endpoint.
+Вони надають деталі про щось. Софі повинна прочитати деталі про кожну кінцеву точку.
 
 ---
 
@@ -79,7 +79,7 @@ They give details about something. Sophie should read the details about each end
 
 ### --feedback--
 
-They are specific instances showing how something works. They are important for understanding the API.
+Конкретні приклади, які показують, як щось працює. Вони важливі для розуміння API.
 
 ---
 
@@ -87,7 +87,7 @@ They are specific instances showing how something works. They are important for
 
 ### --feedback--
 
-It means to try or attempt. Sophie decides to try out Brian's suggestions.
+Спробувати або зробити спробу. Софі вирішила спробувати те, що запропонував Браян.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068a6d0bb2aa90f0d93979.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068a6d0bb2aa90f0d93979.md
index 384abd06cc2..72e3df5749b 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068a6d0bb2aa90f0d93979.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068a6d0bb2aa90f0d93979.md
@@ -1,6 +1,6 @@
 ---
 id: 66068a6d0bb2aa90f0d93979
-title: "Dialogue 2: Analyzing Code Documentation for Functions"
+title: "Діалог 2: аналіз документації по функціях"
 challengeType: 21
 dashedName: dialogue-2-analyzing-code-documentation-for-functions
 ---
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068ad667567091500128c5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068ad667567091500128c5.md
index 0c0fef818dd..0b086eaa347 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068ad667567091500128c5.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068ad667567091500128c5.md
@@ -9,9 +9,9 @@ dashedName: task-10
 
 # --description--
 
-A `library` is like a big bookshelf with lots of code that programmers can use. Think of it like a cookbook with many recipes (functions) you can use to cook (program) different dishes (projects).
+`Library` — це ніби полиця з великою кількістю коду, який можуть використовувати програмісти. Вважайте її книгою з багатьма рецептами (функціями), які можна використати для приготування (програмування) різних страв (проєктів).
 
-For example, a `library` in programming might have a function to make charts. Instead of writing code from scratch, you can use this function, like following a recipe to make a cake.
+Наприклад, `library` в програмуванні може мати функцію для створення графіків. Замість того, щоб писати код з нуля, ви можете використати цю функцію так само, як використовуєте рецепт для приготування торта.
 
 
 # --fillInTheBlank--
@@ -26,7 +26,7 @@ For example, a `library` in programming might have a function to make charts. In
 
 ### --feedback--
 
-This word in programming is like a collection of code, similar to how a library is a collection of books.
+У програмуванні це слово позначає колекцію кодів; схоже до того, як колекцію книг називають «бібліотекою».
 
 ---
 
@@ -34,7 +34,7 @@ This word in programming is like a collection of code, similar to how a library
 
 ### --feedback--
 
-It is used to describe a large number of something. In this case, it refers to the numerous functions in the library.
+Описує велику кількість чогось. У цьому випадку воно стосується численних функцій в бібліотеці.
 
 ---
 
@@ -42,7 +42,7 @@ It is used to describe a large number of something. In this case, it refers to t
 
 ### --feedback--
 
-It is a pronoun used to refer to multiple things. Here, it refers to the functions in the library.
+Займенник, який вказує на декілька речей. У цьому реченні стосується функцій в бібліотеці.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068b650b681c91de9e19a0.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068b650b681c91de9e19a0.md
index d71605f305c..70f5db80def 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068b650b681c91de9e19a0.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068b650b681c91de9e19a0.md
@@ -9,13 +9,13 @@ dashedName: task-11
 
 # --description--
 
-The possessive `'s` shows something belongs to someone or something, like in `Brian's book`, meaning the book belongs to Brian.
+Присвійна літера `'s` вказує, що щось належить комусь або чомусь. Наприклад, `Brian's book` означає, що книга належить Браяну.
 
-`Dealing` means managing or handling something. For example, `When dealing with homework, it's important to be focused.`
+`Dealing` означає мати з чимось справу. Наприклад, `When dealing with homework, it's important to be focused`.
 
-A `function's signature` in programming is like an ID card for a function. It tells you the function's name, what it needs (parameters), and what it gives back (`return type`).
+`Function's signature` в програмуванні — це щось схоже до ID-картки функції. Сигнатура вказує назву функції, що вона потребує (параметри) і що вона повертає (`return type`).
 
-The `return type` of a function is what the function gives back after it runs, like a vending machine returning a soda after you put in money.
+`Return type` — це те, що функція повертає після виконання (так само як автомат повертає напій після того, як ви вклали гроші).
 
 # --fillInTheBlank--
 
@@ -29,7 +29,7 @@ The `return type` of a function is what the function gives back after it runs, l
 
 ### --feedback--
 
-It refers to how you manage or work with something, like functions in programming.
+Це стосується того, як ви керуєте або працюєте з чимось (наприклад, з функціями).
 
 ---
 
@@ -37,7 +37,7 @@ It refers to how you manage or work with something, like functions in programmin
 
 ### --feedback--
 
-It shows that the signature belongs to the function. Remember, `'s` is used to show possession.
+Це вказує, що `signature` належить функції. Пам’ятайте, що `'s` вказує на належність.
 
 ---
 
@@ -45,7 +45,7 @@ It shows that the signature belongs to the function. Remember, `'s` is used to s
 
 ### --feedback--
 
-It means to give or supply. In this context, it refers to the signature giving information.
+Надавати або постачати. У цьому контексті це стосується сигнатури, яка надає інформацію.
 
 ---
 
@@ -53,7 +53,7 @@ It means to give or supply. In this context, it refers to the signature giving i
 
 ### --feedback--
 
-It refers to the kind of value a function returns after it finishes running.
+Значення, яке функція повертає після свого виконання.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068bf9c9046292705b856d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068bf9c9046292705b856d.md
index 9c9e644456f..6fd7fa4c08e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068bf9c9046292705b856d.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068bf9c9046292705b856d.md
@@ -15,35 +15,35 @@ dashedName: task-12
 
 ## --text--
 
-What does the function's signature tell people about the function?
+Що повідомляє сигнатура функції?
 
 ## --answers--
 
-How long the function will take to execute
+Скільки часу займе виконання функції
 
 ### --feedback--
 
-The signature doesn't tell people about the time it takes to run the function.
+Сигнатура не повідомляє час виконання функції.
 
 ---
 
-The color of the function's text in the code
+Колір тексту функції в коді
 
 ### --feedback--
 
-The signature doesn't give information about the appearance of the function in the code.
+Сигнатура не надає інформацію про вигляд функції у коді.
 
 ---
 
-The function's name, parameters, and return type
+Назву функції, її параметри та тип поверненого значення
 
 ---
 
-Who wrote the function
+Хто написав функцію
 
 ### --feedback--
 
-The signature shows the function's details, not the information about its author.
+Сигнатура показує деталі функції, а не її автора.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068c5cfc7a4992f2574ab2.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068c5cfc7a4992f2574ab2.md
index c2573a1c533..e4af1bbb946 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068c5cfc7a4992f2574ab2.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068c5cfc7a4992f2574ab2.md
@@ -9,9 +9,9 @@ dashedName: task-13
 
 # --description--
 
-`Make sense` means to be understandable or logical.
+`Make sense` означає, що все зрозуміло та логічно.
 
-For example, if you're learning a new programming language and finally understand how a function works, you might say, `Oh, now it makes sense!` Here, `makes sense` is used to express that the concept of how a function works in the programming language is now clear and understandable.
+Наприклад, якщо ви вивчаєте нову мову програмування та нарешті зрозуміли, як працює функція, ви можете сказати `Oh, now it makes sense`! Фразою `makes sense` ви виражаєте, що зрозуміли, як працює функція у мові програмування.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ For example, if you're learning a new programming language and finally understan
 
 ### --feedback--
 
-It means understanding or clarity, showing Sophie understands what was explained before.
+Виражає розуміння або ясність; Софі каже, що зрозуміла те, що було пояснено раніше.
 
 ---
 
@@ -33,7 +33,7 @@ It means understanding or clarity, showing Sophie understands what was explained
 
 ### --feedback--
 
-It is used to ask about what should happen next or afterwards. Sophie is asking about the next step after understanding the previous one.
+Це слово використано, щоб запитати, що має статися наступним або після цього. Софі запитує про наступний крок після того, як зрозуміла попередній.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068d4033a07d9393291ef0.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068d4033a07d9393291ef0.md
index 4512d6a82c7..d989d481885 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068d4033a07d9393291ef0.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068d4033a07d9393291ef0.md
@@ -9,7 +9,7 @@ dashedName: task-14
 
 # --description--
 
-`Usage examples` show how something is used.
+`Usage examples` показують, як щось використовується.
 
 # --fillInTheBlank--
 
@@ -23,7 +23,7 @@ dashedName: task-14
 
 ### --feedback--
 
-It means to look at something carefully. Brian suggests looking closely at the function's description.
+Дивитись на щось уважно. Браян пропонує уважно розглянути опис функції.
 
 ---
 
@@ -31,7 +31,7 @@ It means to look at something carefully. Brian suggests looking closely at the f
 
 ### --feedback--
 
-It means to make something clear.
+Пояснювати щось.
 
 ---
 
@@ -39,7 +39,7 @@ It means to make something clear.
 
 ### --feedback--
 
-It means to give or supply. The documentation gives examples of how to use the function.
+Надавати або постачати. Документація надає приклади використання функції.
 
 ---
 
@@ -47,7 +47,7 @@ It means to give or supply. The documentation gives examples of how to use the f
 
 ### --feedback--
 
-These examples show how to use something, like the function in this context.
+Ці приклади пояснюють, як використовувати щось (наприклад, функцію).
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068f5b2b7dda9450a7cc2c.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068f5b2b7dda9450a7cc2c.md
index 92fabfd36cb..3ec15c6c92c 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068f5b2b7dda9450a7cc2c.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068f5b2b7dda9450a7cc2c.md
@@ -9,7 +9,7 @@ dashedName: task-15
 
 # --description--
 
-This task checks your understanding of Brian's advice on using programming documentation.
+Якою порадою щодо документації з програмування поділився Браян?
 
 # --question--
 
@@ -19,31 +19,31 @@ This task checks your understanding of Brian's advice on using programming docum
 
 ## --answers--
 
-Examine the function's description in the documentation for explanations and usage examples
+Розглянути опис функції в документації, звернувши увагу на пояснення та приклади використання
 
 ---
 
-Memorize the function's code
+Запам’ятати код функції
 
 ### --feedback--
 
-While memorizing code can be helpful, Brian specifically mentions examining the documentation, not memorizing the code.
+Запам’ятовування коду може бути корисним, але Браян згадує про аналіз документації.
 
 ---
 
-Change the function's code
+Змінити код функції
 
 ### --feedback--
 
-Brian suggests understanding the function through its documentation, not altering its code.
+Браян пропонує аналізувати функцію завдяки документації, а не зміні коду.
 
 ---
 
-Ignore the documentation
+Ігнорувати документацію
 
 ### --feedback--
 
-Ignoring the documentation goes against Brian's advice, which is to examine it for a better understanding of the function.
+Ігнорування документації суперечить пораді Браяна: він радить дослідити її для кращого розуміння функції.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068fc7aa2fe094c5cb84bd.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068fc7aa2fe094c5cb84bd.md
index e1c03958de6..6cea647887a 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068fc7aa2fe094c5cb84bd.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66068fc7aa2fe094c5cb84bd.md
@@ -23,7 +23,7 @@ dashedName: task-16
 
 ### --feedback--
 
-It is a contraction of `I will`. Sophie is making a promise or plan to follow the steps.
+Скорочена форма `I will`. Софі обіцяє, що дотримуватиметься кроків.
 
 ---
 
@@ -31,7 +31,7 @@ It is a contraction of `I will`. Sophie is making a promise or plan to follow th
 
 ### --feedback--
 
-It refers to specific things, in this case, the steps mentioned earlier in the conversation.
+Займенник, який вказує на конкретні речі (у цьому випадку кроки, згадані раніше).
 
 ---
 
@@ -39,7 +39,7 @@ It refers to specific things, in this case, the steps mentioned earlier in the c
 
 ### --feedback--
 
-It is used for individual items. Sophie plans to follow the steps for every single function, one by one.
+Використовується для окремих предметів. Софі планує дотримуватись кроків для кожної функції.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606906b3f31fc953f1ee3b6.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606906b3f31fc953f1ee3b6.md
index 1598613b772..fab20b667fe 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606906b3f31fc953f1ee3b6.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606906b3f31fc953f1ee3b6.md
@@ -23,7 +23,7 @@ dashedName: task-17
 
 ### --feedback--
 
-It refers to a collection of pre-written code or functions in programming.
+Колекція попередньо написаного коду або функції в програмуванні.
 
 ---
 
@@ -31,7 +31,7 @@ It refers to a collection of pre-written code or functions in programming.
 
 ### --feedback--
 
-This word indicates a large number of something, here referring to functions.
+Велика кількість чогось (у цьому випадку функцій).
 
 ---
 
@@ -39,7 +39,7 @@ This word indicates a large number of something, here referring to functions.
 
 ### --feedback--
 
-It means to examine something carefully.
+Уважно розглядати щось.
 
 ---
 
@@ -47,7 +47,7 @@ It means to examine something carefully.
 
 ### --feedback--
 
-It refers to how you manage or work with something.
+Стосується того, як ви працюєте з чимось.
 
 ---
 
@@ -55,7 +55,7 @@ It refers to how you manage or work with something.
 
 ### --feedback--
 
-It includes details of a function, like its name and parameters.
+Вона містить деталі функції (зокрема, її назву та параметри).
 
 ---
 
@@ -63,7 +63,7 @@ It includes details of a function, like its name and parameters.
 
 ### --feedback--
 
-It means to give or supply, here referring to the information given by the signature.
+Надавати або постачати; у цьому реченні це стосується інформації, яку надає сигнатура.
 
 ---
 
@@ -71,7 +71,7 @@ It means to give or supply, here referring to the information given by the signa
 
 ### --feedback--
 
-In this context, it refers to the kind of result or output a function gives.
+У цьому контексті це стосується результату або вихідних даних, що надає функція.
 
 ---
 
@@ -79,7 +79,7 @@ In this context, it refers to the kind of result or output a function gives.
 
 ### --feedback--
 
-It means something is clear or understandable.
+Це означає, що все зрозуміло або логічно.
 
 ---
 
@@ -87,7 +87,7 @@ It means something is clear or understandable.
 
 ### --feedback--
 
-This word means to look at something carefully.
+Дивитись на щось уважно.
 
 ---
 
@@ -95,7 +95,7 @@ This word means to look at something carefully.
 
 ### --feedback--
 
-These examples show how something can be used.
+Ці приклади показують, як щось використовується.
 
 ---
 
@@ -103,7 +103,7 @@ These examples show how something can be used.
 
 ### --feedback--
 
-It refers to specific things mentioned earlier, in this case, the steps for analyzing functions.
+Це стосується конкретних речей, згаданих раніше (у цьому випадку кроки для аналізу функцій).
 
 ---
 
@@ -111,7 +111,7 @@ It refers to specific things mentioned earlier, in this case, the steps for anal
 
 ### --feedback--
 
-It is used to refer to individual items or cases, here meaning every single function.
+Це слово позначає окремі предмети або випадки (у цьому реченні означає кожну окрему функцію).
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660694cf7803c598ce999171.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660694cf7803c598ce999171.md
index 016b6df54be..193d72b5af4 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660694cf7803c598ce999171.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660694cf7803c598ce999171.md
@@ -1,6 +1,6 @@
 ---
 id: 660694cf7803c598ce999171
-title: "Dialogue 3: Analyzing Code Documentation for Classes and Objects"
+title: "Діалог 3: аналіз документації по класах та об’єктах"
 challengeType: 21
 dashedName: dialogue-3-analyzing-code-documentation-for-classes-and-objects
 ---
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606952c28640e9941c8fa29.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606952c28640e9941c8fa29.md
index 37f554eabda..a42eea6ad3c 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606952c28640e9941c8fa29.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606952c28640e9941c8fa29.md
@@ -9,9 +9,9 @@ dashedName: task-18
 
 # --description--
 
-Usually, `with` is used to show connection or use. For example, `I write with a pen.` However, in some sentences, `with` comes at the end. This usually happens when you want to emphasize the object or thing someone is using or dealing with, especially in questions or statements about technology or work.
+Зазвичай `with` використовують, щоб показати зв’язок або спосіб використання. Наприклад, `I write with a pen`. У деяких реченнях `with` пишуть після слова, якого воно стосується. Так зазвичай буває, коли хочуть підкреслити об’єкт або річ, яку хтось використовує, особливо у запитаннях або висловлюваннях про технології чи роботу.
 
-For instance, in tech, you might say, `This program I work with is challenging.` Here, `with` is used at the end to emphasize the program that is challenging to work with. Another example could be a question like, `What else is he working with?` where `with` at the end asks about other tools or technologies being used.
+Наприклад, ви можете сказати `This program I work with is challenging`, де `with` використано після слова, якого воно стосується, щоб підкреслити програму, з якою важко працювати. Ще один приклад: `What else is he working with?`, де `with` запитує про інші інструменти або технології.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ For instance, in tech, you might say, `This program I work with is challenging.`
 
 ### --feedback--
 
-It emphasizes the object of use or concern, in this case, the class Sophie is working with.
+Підкреслює об’єкт у використанні (у цьому випадку клас, з яким працює Софі).
 
 ---
 
@@ -33,7 +33,7 @@ It emphasizes the object of use or concern, in this case, the class Sophie is wo
 
 ### --feedback--
 
-It means something is complicated or has many parts.
+Означає, що щось складне або має багато частин.
 
 ---
 
@@ -41,7 +41,7 @@ It means something is complicated or has many parts.
 
 ### --feedback--
 
-It is used to describe the appearance or impression of something.
+Використовують, щоб описати зовнішній вигляд або враження від чогось.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660695c672854899d6862834.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660695c672854899d6862834.md
index bda81d82b18..07d279efb4c 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660695c672854899d6862834.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660695c672854899d6862834.md
@@ -15,35 +15,35 @@ dashedName: task-19
 
 ## --text--
 
-What is Sophie's problem in this dialogue?
+З якою проблемою зіткнулась Софі?
 
 ## --answers--
 
-She is happy with the class and finds the documentation easy
+Вона задоволена класом, а документацію вважає легкою
 
 ### --feedback--
 
-This option is incorrect because Sophie finds the class complex and the documentation confusing, not easy.
+Це неправильна відповідь, оскільки Софі вважає клас складним, а документацію заплутаною.
 
 ---
 
-She finds the class complex and the documentation confusing
+Вона вважає, що клас та документація складні
 
 ---
 
-She wants to quit the class
+Вона хоче покинути клас
 
 ### --feedback--
 
-Sophie expresses difficulty with the class but does not mention wanting to quit.
+Софі каже, що з класом виникають труднощі, але не згадує, що хоче покинути його.
 
 ---
 
-She is looking for a new class
+Вона шукає новий клас
 
 ### --feedback--
 
-Sophie talks about her current class being complex, not about searching for a new one.
+Софі каже, що поточний клас складний, а не те, що хоче знайти новий.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696292c16659a5e9ccf81.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696292c16659a5e9ccf81.md
index b300161cb3e..3879adc2647 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696292c16659a5e9ccf81.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696292c16659a5e9ccf81.md
@@ -9,7 +9,7 @@ dashedName: task-20
 
 # --description--
 
-Remember: `its` is a possessive pronoun used for things or animals, not people. It shows that something belongs to or is part of something else.
+Пам’ятайте: `its` — це присвійний займенник, який використовується до речей або тварин, але не людей. Він вказує, що щось належить або є частиною чогось іншого.
 
 # --fillInTheBlank--
 
@@ -23,7 +23,7 @@ Remember: `its` is a possessive pronoun used for things or animals, not people.
 
 ### --feedback--
 
-It is a contraction of `you are`, used here to describe an action you are doing.
+Скорочена форма `you are`. У цьому реченні стосується дії, яку ви виконуєте.
 
 ---
 
@@ -31,7 +31,7 @@ It is a contraction of `you are`, used here to describe an action you are doing.
 
 ### --feedback--
 
-It is a possessive form, showing that the name and properties belong to the class.
+Присвійний займенник, який вказує, що назва та властивості належать класу.
 
 ---
 
@@ -39,7 +39,7 @@ It is a possessive form, showing that the name and properties belong to the clas
 
 ### --feedback--
 
-This word refers to something belonging to the class, in this case, the class's purpose.
+Це слово стосується чогось, що належить класу (у цьому випадку його призначення).
 
 ---
 
@@ -47,7 +47,7 @@ This word refers to something belonging to the class, in this case, the class's
 
 ### --feedback--
 
-This word again refers to something belonging to the class, here specifying the class's structure.
+Це слово стосується чогось, що належить класу (у цьому випадку його структура).
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696cce3e4e79af4612466.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696cce3e4e79af4612466.md
index f1428d58d5f..ce8133c6b7e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696cce3e4e79af4612466.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660696cce3e4e79af4612466.md
@@ -15,35 +15,35 @@ dashedName: task-21
 
 ## --text--
 
-What does Brian suggest doing first when dealing with classes?
+Що Браян пропонує зробити при роботі з класами в першу чергу?
 
 ## --answers--
 
-Write new properties for the class
+Написати нові властивості для класу
 
 ### --feedback--
 
-This option is incorrect. Brian's advice is to begin by understanding the class, not by writing new properties.
+Це неправильна відповідь. Браян рекомендує спочатку зрозуміти клас, а не писати нові властивості.
 
 ---
 
-Change the class's name
+Змінити назву класу
 
 ### --feedback--
 
-Brian does not suggest changing the name but rather checking the existing name and properties.
+Браян не пропонує змінювати назву, а радить перевірити наявні назву та властивості.
 
 ---
 
-Discuss the class with a colleague
+Обговорити клас з колегою
 
 ### --feedback--
 
-While discussing with a colleague can be helpful, Brian specifically advises to start by checking the class's name and properties.
+Хоча обговорення з колегою може бути корисним, Браян конкретно радить почати з перевірки назви та властивостей класу.
 
 ---
 
-Check the class's name and properties
+Перевірити назву та властивості класу
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66069719acca7d9b59499ce9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66069719acca7d9b59499ce9.md
index 0b11bb64f1a..84a4ba20d8c 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66069719acca7d9b59499ce9.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/66069719acca7d9b59499ce9.md
@@ -9,7 +9,7 @@ dashedName: task-22
 
 # --description--
 
-`Achieve` means to successfully reach a goal or complete a task. In programming, it can refer to what you can accomplish with a class or method. Like saying, `With this code, I can achieve a fast calculation.`
+`Achieve` означає успішно досягти мети або виконати завдання. У програмуванні це може стосуватися того, що ви можете здійснити за допомогою класу або методу. Наприклад, `With this code, I can achieve a fast calculation`.
 
 # --fillInTheBlank--
 
@@ -23,7 +23,7 @@ dashedName: task-22
 
 ### --feedback--
 
-It is a specific function or action that is part of a class in programming.
+Конкретна функція або дія, яка є частиною класу в програмуванні.
 
 ---
 
@@ -31,7 +31,7 @@ It is a specific function or action that is part of a class in programming.
 
 ### --feedback--
 
-It refers to things that are connected or linked, like methods and functions that are part of a class.
+Це слово вказує, що речі пов’язані між собою (як методи та функції, що є частиною класу).
 
 ---
 
@@ -39,7 +39,7 @@ It refers to things that are connected or linked, like methods and functions tha
 
 ### --feedback--
 
-This word means to describe or make clear. Here, it's about making clear how to use the class.
+Це слово означає «описувати» або «пояснювати». У цьому реченні це стосується пояснення, як використовувати клас.
 
 ---
 
@@ -47,7 +47,7 @@ This word means to describe or make clear. Here, it's about making clear how to
 
 ### --feedback--
 
-It means to successfully complete or reach a goal. In this context, it refers to what you can do with the class.
+Успішно завершити щось або досягти мети. У цьому контексті це стосується того, що ви можете зробити за допомогою класу.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606977e8f0b509bdac39012.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606977e8f0b509bdac39012.md
index 055f99d7b9e..d243791ed89 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606977e8f0b509bdac39012.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606977e8f0b509bdac39012.md
@@ -15,35 +15,35 @@ dashedName: task-23
 
 ## --text--
 
-What does Brian recommend doing next after checking the class's name and properties?
+Що рекомендує зробити Браян після перевірки назви та властивостей класу?
 
 ## --answers--
 
-Start writing new functions immediately
+Одразу почати писати нові функції
 
 ### --feedback--
 
-This option is incorrect. Brian suggests reading existing methods and functions first, not writing new ones immediately.
+Це неправильна відповідь. Браян пропонує спочатку прочитати наявні методи та функції, а не одразу писати нові.
 
 ---
 
-Read the methods and functions associated with the class
+Прочитати методи та функції, пов’язані з класом
 
 ---
 
-Change the methods of the class
+Змінити методи класу
 
 ### --feedback--
 
-Brian advises reading and understanding the methods, not changing them at this stage.
+Браян пропонує прочитати та зрозуміти методи, а не змінювати їх.
 
 ---
 
-Ignore the class's methods and functions
+Проігнорувати методи та функції класу
 
 ### --feedback--
 
-Ignoring the methods and functions goes against Brian's advice. He emphasizes the importance of reading them.
+Ця відповідь суперечить пораді Браяна. Він наголошує, що їх важливо прочитати.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660697f307c6559c60e976f7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660697f307c6559c60e976f7.md
index d32e7a52146..4b09306604e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660697f307c6559c60e976f7.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/660697f307c6559c60e976f7.md
@@ -9,11 +9,11 @@ dashedName: task-24
 
 # --description--
 
-To `calm down` means to relax or become less worried. For example, `If you are stressed about a coding error, you might take a deep breath to calm down.`
+`Calm down` означає розслабитися або перестати турбуватись. Наприклад, `If you are stressed about a coding error, you might take a deep breath to calm down`.
 
-`Careful` is an adjective that describes being cautious or paying attention to details. Like saying, `Be careful with that function.`
+`Careful` — це прикметник, який описує обережність або увагу до деталей. Наприклад, `Be careful with that function`.
 
-`Carefully` is an adverb, describing how an action is done. For instance, `Read the code carefully` means to read the code with attention and in a detailed way.
+`Carefully` — це прислівник, який описує, як виконують дію. Наприклад, `Read the code carefully` означає уважно прочитати код.
 
 # --fillInTheBlank--
 
@@ -27,7 +27,7 @@ To `calm down` means to relax or become less worried. For example, `If you are s
 
 ### --feedback--
 
-`Calm down` means to become less anxious or stressed. Sophie is trying to relax to focus better on her reading.
+`Calm down` означає заспокоїтись. Софі намагається розслабитися, щоб краще зосередитися на читанні.
 
 ---
 
@@ -35,7 +35,7 @@ To `calm down` means to relax or become less worried. For example, `If you are s
 
 ### --feedback--
 
-This word is used to describe reading in a detailed and cautious way. Sophie wants to pay close attention to the documentation.
+Це слово використовують, щоб описати читання як детальне та обережне. Софі хоче звернути пильну увагу на документацію.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606989c34f0be9d141130b1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606989c34f0be9d141130b1.md
index 7a51b2663e2..b8139ba1807 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606989c34f0be9d141130b1.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-analyze-code-documentation/6606989c34f0be9d141130b1.md
@@ -23,7 +23,7 @@ dashedName: task-25
 
 ### --feedback--
 
-It refers to the complicated nature of the class Sophie is working with.
+Це стосується складного характеру класу, з яким працює Софі.
 
 ---
 
@@ -31,7 +31,7 @@ It refers to the complicated nature of the class Sophie is working with.
 
 ### --feedback--
 
-This word describes how Sophie views the class's documentation.
+Це слово описує, якою Софі вважає документацію класу.
 
 ---
 
@@ -39,7 +39,7 @@ This word describes how Sophie views the class's documentation.
 
 ### --feedback--
 
-It indicates the beginning of the process Brian suggests.
+Вказує на початок процесу, який пропонує Браян.
 
 ---
 
@@ -47,7 +47,7 @@ It indicates the beginning of the process Brian suggests.
 
 ### --feedback--
 
-It helps identify the class's purpose.
+Допомагає визначити призначення класу.
 
 ---
 
@@ -55,7 +55,7 @@ It helps identify the class's purpose.
 
 ### --feedback--
 
-They are characteristics or attributes of the class.
+Характеристики або атрибути класу.
 
 ---
 
@@ -63,7 +63,7 @@ They are characteristics or attributes of the class.
 
 ### --feedback--
 
-They are specific functions or procedures in the class.
+Конкретні функції або процедури в класі.
 
 ---
 
@@ -71,7 +71,7 @@ They are specific functions or procedures in the class.
 
 ### --feedback--
 
-It means the tasks or operations that the class can perform.
+Завдання або операції, які може виконувати клас.
 
 ---
 
@@ -79,7 +79,7 @@ It means the tasks or operations that the class can perform.
 
 ### --feedback--
 
-It means connected with the class.
+Означає, що пов’язаний з класом.
 
 ---
 
@@ -87,7 +87,7 @@ It means connected with the class.
 
 ### --feedback--
 
-It refers to how one can use or work with the class.
+Стосується того, як можна використовувати або працювати з класом.
 
 ---
 
@@ -95,7 +95,7 @@ It refers to how one can use or work with the class.
 
 ### --feedback--
 
-It involves accomplishing something using the class.
+Стосується досягнення чогось за допомогою класу.
 
 ---
 
@@ -103,7 +103,7 @@ It involves accomplishing something using the class.
 
 ### --feedback--
 
-Part of Sophie's decision to relax and reduce stress.
+Частина фрази про розслаблення.
 
 ---
 
@@ -111,7 +111,7 @@ Part of Sophie's decision to relax and reduce stress.
 
 ### --feedback--
 
-It means to do something with attention to detail.
+Означає виконувати щось з увагою до деталей.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636159376b91532f4f8e49b.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636159376b91532f4f8e49b.md
index d9be517d0f4..9d4965d6c7c 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636159376b91532f4f8e49b.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636159376b91532f4f8e49b.md
@@ -23,7 +23,7 @@ For large teams with specialized skills in coding
 
 ### --feedback--
 
-This option is incorrect. Sarah points out that low-code development is more beneficial for teams with limited coding resources, not those that are large and highly specialized.
+Це неправильна відповідь. Sarah points out that low-code development is more beneficial for teams with limited coding resources, not those that are large and highly specialized.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663621cf8781e93738b3e30f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663621cf8781e93738b3e30f.md
index 48117c96a70..b30d011e7c5 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663621cf8781e93738b3e30f.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663621cf8781e93738b3e30f.md
@@ -27,7 +27,7 @@ To ignore the new tools and continue with their current methods
 
 ### --feedback--
 
-This option is incorrect. Sarah is suggesting to explore the new tools, not ignore them.
+Це неправильна відповідь. Sarah is suggesting to explore the new tools, not ignore them.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636242c12c019384fd78b5a.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636242c12c019384fd78b5a.md
index 6f0413dec9f..8f8e0d79143 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636242c12c019384fd78b5a.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636242c12c019384fd78b5a.md
@@ -23,7 +23,7 @@ No, because he thinks it's a waste of time.
 
 ### --feedback--
 
-This option is incorrect. Brian's response `I'm on it` implies that he is already taking action, which shows agreement, not rejection.
+Це неправильна відповідь. Brian's response `I'm on it` implies that he is already taking action, which shows agreement, not rejection.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617562f72eb2a9387252430.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617562f72eb2a9387252430.md
index b13e450e26a..8da0d74c8c1 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617562f72eb2a9387252430.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617562f72eb2a9387252430.md
@@ -27,7 +27,7 @@ He strongly disagrees and insists on keeping the current color scheme.
 
 ### --feedback--
 
-This option is incorrect. Bob's response shows understanding and agreement with Sophie's point, not strong disagreement.
+Це неправильна відповідь. Bob's response shows understanding and agreement with Sophie's point, not strong disagreement.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
index f5962f61f18..2088dbac6b0 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
@@ -23,7 +23,7 @@ He will disregard Sophie's feedback and make the changes himself.
 
 ### --feedback--
 
-This option is incorrect. Bob acknowledges Sophie's feedback and plans to share it with Tom for further action.
+Це неправильна відповідь. Bob acknowledges Sophie's feedback and plans to share it with Tom for further action.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
index 66d1b7a65b1..f4eac04e6eb 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
@@ -25,7 +25,7 @@ She thinks the design is perfect and doesn't need any changes.
 
 ### --feedback--
 
-This option is incorrect. Sophie's comments suggest she sees areas for improvement, not that the design is perfect.
+Це неправильна відповідь. Sophie's comments suggest she sees areas for improvement, not that the design is perfect.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617962704224fe969a76811.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617962704224fe969a76811.md
index ee45c7a0138..45586619650 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617962704224fe969a76811.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617962704224fe969a76811.md
@@ -27,7 +27,7 @@ Because the web app is newer than the mobile app
 
 ### --feedback--
 
-This option is incorrect. Sarah's reason for prioritizing the web app is its larger user base, not its newness.
+Це неправильна відповідь. Sarah's reason for prioritizing the web app is its larger user base, not its newness.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b1efe920c2ffea40b54d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b1efe920c2ffea40b54d.md
index f444043dcfa..6c6ebb1194a 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b1efe920c2ffea40b54d.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b1efe920c2ffea40b54d.md
@@ -27,7 +27,7 @@ She suggests continuing with the current methodology without any changes.
 
 ### --feedback--
 
-This option is incorrect. Sarah's statement clearly indicates a proposal for a change to agile methodology.
+Це неправильна відповідь. Sarah's statement clearly indicates a proposal for a change to agile methodology.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd595245455d0dca3434ba.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd595245455d0dca3434ba.md
index 677319f55e3..c3de2811090 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd595245455d0dca3434ba.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd595245455d0dca3434ba.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd595245455d0dca3434ba
-title: "Dialogue 1: Navigating Documentation"
+title: "Діалог 1: навігація по документації"
 challengeType: 21
 dashedName: dialogue-1-navigating-documentation
 ---
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5a9680a9540e9787dec5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5a9680a9540e9787dec5.md
index 4b8876ba54e..26e7a5758aa 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5a9680a9540e9787dec5.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5a9680a9540e9787dec5.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5a9680a9540e9787dec5
-title: Task 1
+title: Завдання 1
 challengeType: 22
 dashedName: task-1
 ---
@@ -9,13 +9,13 @@ dashedName: task-1
 
 # --description--
 
-`Overwhelming` means feeling like something is too much to handle.
+`Overwhelming` означає відчуття, коли щось занадто складне.
 
-For example, `The amount of information was overwhelming.` (meaning it was a lot!)
+Наприклад, `The amount of information was overwhelming` (тобто інформації було багато).
 
-`Effective` is an adjective that describes something producing a desired result. Like, `An effective method`.
+`Effective` — це прикметник, який описує щось, що приносить бажаний результат. Наприклад, `An effective method`.
 
-`Effectively` is an adverb, meaning in an `effective` way. For instance, `He completed the task effectively.`
+`Effectively` — це прислівник, що означає «ефективно». Наприклад, `He completed the task effectively`.
 
 # --fillInTheBlank--
 
@@ -29,7 +29,7 @@ For example, `The amount of information was overwhelming.` (meaning it was a lot
 
 ### --feedback--
 
-This word describes a situation where something feels too difficult or too much to handle.
+Це слово описує ситуацію, коли щось здається занадто складним.
 
 ---
 
@@ -37,7 +37,7 @@ This word describes a situation where something feels too difficult or too much
 
 ### --feedback--
 
-This word means in a way that is successful and achieves what you want.
+Це слово означає «успішно діяти і досягати бажаного результату».
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5c89285ea50f25bd0241.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5c89285ea50f25bd0241.md
index 1554c7f035e..cda3b64541a 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5c89285ea50f25bd0241.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5c89285ea50f25bd0241.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5c89285ea50f25bd0241
-title: Task 2
+title: Завдання 2
 challengeType: 19
 dashedName: task-2
 ---
@@ -15,35 +15,35 @@ dashedName: task-2
 
 ## --text--
 
-What is Tom's main concern and what is he asking for?
+З якою проблемою зіткнувся Том та про що він просить?
 
 ## --answers--
 
-He finds the code documentation overwhelming and is asking for ways to navigate it more effectively.
+Він вважає, що документація важка для розуміння і шукає способи краще зрозуміти її.
 
 ---
 
-Tom wants to rewrite the code documentation.
+Том хоче переписати документацію по коду.
 
 ### --feedback--
 
-Tom's concern is about understanding the existing documentation, not about rewriting it.
+Проблема Тома полягає у розумінні наявної документації, а не її переписуванні.
 
 ---
 
-He is asking for help to reduce the amount of documentation.
+Він просить зменшити обсяг документації.
 
 ### --feedback--
 
-Tom's issue is not with the quantity of the documentation but with how to understand it more effectively.
+Проблема Тома не в обсязі документації, а в тому, як її краще зрозуміти.
 
 ---
 
-Tom is looking for someone to explain the entire documentation to him.
+Том шукає когось, хто пояснив би йому всю документацію.
 
 ### --feedback--
 
-While Tom is seeking help, he specifically asks for ways to navigate the documentation more effectively, not for a full explanation.
+Хоча Том шукає допомоги, він конкретно просить способи більш ефективної навігації по документації, а не її повне пояснення.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5d1a6cb7f10f77a06163.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5d1a6cb7f10f77a06163.md
index 8234809f168..f23cb314f65 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5d1a6cb7f10f77a06163.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5d1a6cb7f10f77a06163.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5d1a6cb7f10f77a06163
-title: Task 3
+title: Завдання 3
 challengeType: 22
 dashedName: task-3
 ---
@@ -9,9 +9,9 @@ dashedName: task-3
 
 # --description--
 
-`To be faced with` means to encounter or confront something, usually a challenge. For example, `She was faced with a difficult decision` meaning being in a situation where she needs to deal with something.
+`To be faced with` означає зіткнутися або протистояти чомусь, зазвичай виклику. Наприклад, `She was faced with a difficult decision` означає бути в ситуації, коли потрібно з чимось справитися.
 
-A `table of contents` is a list at the beginning of a document, showing its structure. Like in a book, `The table of contents lists all the chapters.`
+`Table of contents` — це список на початку документа, що показує його структуру. Наприклад, `The table of contents lists all the chapters`.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ A `table of contents` is a list at the beginning of a document, showing its stru
 
 ### --feedback--
 
-It means to feel anxious or concerned. Sarah is telling Tom not to feel overwhelmed.
+Відчувати занепокоєння або стурбованість. Сара каже Тому, щоб він не переживав.
 
 ---
 
@@ -33,7 +33,7 @@ It means to feel anxious or concerned. Sarah is telling Tom not to feel overwhel
 
 ### --feedback--
 
-It means encountering or dealing with something, often a problem or challenge.
+Зустрітися або мати справу з чимось, часто з проблемою або викликом.
 
 ---
 
@@ -41,7 +41,7 @@ It means encountering or dealing with something, often a problem or challenge.
 
 ### --feedback--
 
-This word in this context is part of a phrase which helps navigate a document by listing its main parts.
+Це слово є частиною словосполучення, що допомагає орієнтуватися в документі, перераховуючи його основні частини.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5da902959d0fda781aa3.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5da902959d0fda781aa3.md
index b5d6f8d7a96..1b5a38dc654 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5da902959d0fda781aa3.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5da902959d0fda781aa3.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5da902959d0fda781aa3
-title: Task 4
+title: Завдання 4
 challengeType: 22
 dashedName: task-4
 ---
@@ -9,11 +9,11 @@ dashedName: task-4
 
 # --description--
 
-`Extensive` means large in amount or scope. For example, `The researcher conducted an extensive study.` It conveys something vast or wide-ranging.
+`Extensive` — це великий за обсягом або масштабом. Наприклад, `The researcher conducted an extensive study`. Це слово описує щось велике або широкомасштабне.
 
-An `index` is a list, usually at the end of a book or document, that tells you where to find specific information. Like, `I used the index to find the topic I was interested in.`
+`Index` — це список, зазвичай в кінці книги або документа, який показує, де знайти конкретну інформацію. Наприклад, `I used the index to find the topic I was interested in`.
 
-Fill in the blanks below.
+Заповніть прогалини нижче.
 
 # --fillInTheBlank--
 
@@ -27,7 +27,7 @@ Fill in the blanks below.
 
 ### --feedback--
 
-This word describes something that is large or comprehensive. Sarah uses it to describe the vast amount of documentation.
+Це слово описує щось велике або всеосяжне. Сара використовує його, щоб описати великий обсяг документації.
 
 ---
 
@@ -35,7 +35,7 @@ This word describes something that is large or comprehensive. Sarah uses it to d
 
 ### --feedback--
 
-It means to look at something to confirm its presence or accuracy. Sarah suggests verifying if there is a table of contents or an index.
+Подивитися на щось, щоб підтвердити наявність або точність. Сара пропонує перевірити, чи документація містить зміст або покажчик.
 
 ---
 
@@ -43,7 +43,7 @@ It means to look at something to confirm its presence or accuracy. Sarah suggest
 
 ### --feedback--
 
-It's a list in a document or book used for finding specific information.
+Список у документі або книзі, який використовується для пошуку конкретної інформації.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5dfc174596101eae1107.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5dfc174596101eae1107.md
index a077f348fd6..7e9877a9f27 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5dfc174596101eae1107.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5dfc174596101eae1107.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5dfc174596101eae1107
-title: Task 5
+title: Завдання 5
 challengeType: 19
 dashedName: task-5
 ---
@@ -15,35 +15,35 @@ dashedName: task-5
 
 ## --text--
 
-According to Sarah, what is the first thing a person should do when faced with extensive documentation?
+Що радить зробити Сара, якщо ви зіткнулись з великим обсягом документації?
 
 ## --answers--
 
-Start reading from the beginning without skipping any part
+Почати читати з початку, не пропускаючи жодної частини
 
 ### --feedback--
 
-While thorough reading can be helpful, Sarah specifically suggests first checking for a table of contents or an index.
+Хоча таке читання може бути корисним, Сара пропонує спочатку перевірити, чи документація містить зміст або покажчик.
 
 ---
 
-Write a summary of the documentation
+Написати конспект по документації
 
 ### --feedback--
 
-Sarah's advice is about finding a way to navigate the documentation, not about summarizing it.
+Порада Сари стосується того, як орієнтуватись в документації, а не конспекту.
 
 ---
 
-Create a new documentation guide
+Створити нове керівництво з документації
 
 ### --feedback--
 
-Sarah advises on how to navigate existing documentation, not on creating a new guide.
+Сара радить, як орієнтуватися в наявній документації, а не створювати нове керівництво.
 
 ---
 
-Check for a table of contents or an index
+Перевірити, чи документація містить зміст або покажчик
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
index 97abeb07bb2..9468872eed9 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5f2abfdbc510942d76f8
-title: Task 6
+title: Завдання 6
 challengeType: 19
 dashedName: task-6
 ---
@@ -15,35 +15,35 @@ dashedName: task-6
 
 ## --text--
 
-Why does Sarah suggest that the first thing Tom should do with extensive documentation is to check for a table of contents or an index?
+Чому Сара рекомендує в першу чергу перевірити, чи документація містить зміст або покажчик?
 
 ## --answers--
 
-Because it will help him memorize the entire documentation
+Тому що це допоможе запам’ятати всю документацію
 
 ### --feedback--
 
-The purpose of checking the table of contents or index isn't memorization but efficient navigation.
+Мета змісту або покажчика не в запам’ятовуванні, а ефективній навігації.
 
 ---
 
-To help him find the specific information he needs more quickly
+Це допоможе швидше знайти потрібну інформацію
 
 ---
 
-Because it's a standard practice to read everything in order
+Тому що читати все підряд — це стандартна практика
 
 ### --feedback--
 
-The suggestion isn’t about reading everything in order but about finding specific information efficiently.
+Порада Сари стосується не читання всього підряд, а ефективного пошуку конкретної інформації.
 
 ---
 
-To evaluate the quality of the documentation
+Щоб оцінити якість документації
 
 ### --feedback--
 
-The focus of Sarah's advice is on efficient navigation, not on evaluating the documentation's quality.
+Порада Сари стосується ефективної навігації, а не оцінки документації.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f86457b4910e35b51c9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f86457b4910e35b51c9.md
index b6bc6ba2291..121515dce5f 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f86457b4910e35b51c9.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f86457b4910e35b51c9.md
@@ -1,6 +1,6 @@
 ---
 id: 65fd5f86457b4910e35b51c9
-title: Task 7
+title: Завдання 7
 challengeType: 22
 dashedName: task-7
 ---
@@ -23,7 +23,7 @@ dashedName: task-7
 
 ### --feedback--
 
-In this context, it's part of a phrase expressing that something is understandable or logical.
+Частина фрази, яка виражає, що щось зрозуміле або логічне.
 
 ---
 
@@ -31,7 +31,7 @@ In this context, it's part of a phrase expressing that something is understandab
 
 ### --feedback--
 
-It's about what should be done following the current action or step.
+Описує, що щось потрібно зробити наступним.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd620e9ba99c116c42c361.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd620e9ba99c116c42c361.md
index 28cbcbb5239..aac18049141 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd620e9ba99c116c42c361.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd620e9ba99c116c42c361.md
@@ -1,49 +1,49 @@
 ---
 id: 65fd620e9ba99c116c42c361
-title: Task 8
+title: Завдання 8
 challengeType: 19
 dashedName: task-8
 ---
 
 # --description--
 
-Developers often use `once` to indicate the timing of tasks within their workflow. It means `as soon as` or `when`.
+Розробники часто використовують `once`, коли говорять про розподіл часу на виконання завдань. Це означає `as soon as` або `when`.
 
-For example, `Once you receive the client's feedback, update the project documentation.` This means that updating the documentation should begin immediately after receiving feedback, showing the sequence of actions in a project's lifecycle.
+Наприклад, `Once you receive the client's feedback, update the project documentation`. Це означає, що документацію потрібно оновити одразу після отримання зворотного зв’язку, показуючи послідовність дій у життєвому циклі проєкту.
 
 # --question--
 
 ## --text--
 
-What does `once` mean in the sentence `Once the client approves the design, we can proceed to development`?
+Що означає `once` в реченні `Once the client approves the design, we can proceed to development`?
 
 ## --answers--
 
-Before the client sees the design
+Перш ніж клієнт побачить дизайн
 
 ### --feedback--
 
-`Once` implies that the next step (development) happens after the preceding action (approval) is complete, so the client should have seen the design.
+`Once` означає, що наступний крок (розробка) відбувається після завершення попередньої дії (затвердження), тому клієнт повинен побачити дизайн.
 
 ---
 
-As soon as the client approves the design
+Як тільки клієнт затвердить дизайн
 
 ---
 
-Without waiting for the client's approval
+Не чекаючи на затвердження клієнта
 
 ### --feedback--
 
-`Once` indicates that the subsequent action is dependent on the completion of the first, implying a wait for approval is necessary.
+`Once` означає, що наступна дія залежить від завершення попередньої, що передбачає необхідність чекати на затвердження.
 
 ---
 
-Before the client approves the design
+Перед тим, як клієнт затвердить дизайн
 
 ### --feedback--
 
-The use of `once` signifies that development should start only after receiving the client's approval, not before.
+Використання `once` означає, що розробка має початися тільки після отримання затвердження клієнта, а не перед цим.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd63be9afd7611d2a9b788.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd63be9afd7611d2a9b788.md
index b051f5b2839..3e3ad22d466 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd63be9afd7611d2a9b788.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd63be9afd7611d2a9b788.md
@@ -1,51 +1,51 @@
 ---
 id: 65fd63be9afd7611d2a9b788
-title: Task 9
+title: Завдання 9
 challengeType: 19
 dashedName: task-9
 ---
 
 # --description--
 
-An `introductory` part is the beginning of a document that introduces the main topics. Example: `The introductory chapter of the book outlines the key concepts.`
+`Introductory` — це початок документа, що вводить основні теми. Наприклад, `The introductory chapter of the book outlines the key concepts`.
 
-A `paragraph` is a section of writing on a particular theme. Like, `Each paragraph in the blog post focuses on a different technology trend.`
+`Paragraph` — це частина тексту, присвячена певній темі. Наприклад, `Each paragraph in the blog post focuses on a different technology trend`.
 
-`To cover` means to deal with or include specific content. For example, In a tech guide, `This section covers the steps to install software.`
+`Cover` означає розглядати певний зміст. Наприклад, `This section covers the steps to install software`.
 
 # --question--
 
 ## --text--
 
-What is the purpose of an introductory paragraph in a technical document?
+Для чого в технічному документі використовують `introductory paragraph`?
 
 ## --answers--
 
-To provide a conclusion to the document
+Щоб надати висновок до документа
 
 ### --feedback--
 
-A conclusion is the end part of a document that sums up the points made, not the beginning. The `introductory paragraph` introduces the main topics.
+Висновок — це кінцева частина документа, яка підсумовує основне, а не початок. `Introductory paragraph` вводить основні теми.
 
 ---
 
-To introduce the main topics the document will cover
+Щоб ввести основні теми, які охоплює документ
 
 ---
 
-To list all the sources used in the document
+Щоб перелічити всі джерела, використані в документі
 
 ### --feedback--
 
-Sources are the origins of information, like books or articles. While it's important, the `introductory paragraph` mainly introduces the document's main topics, not just lists sources.
+Джерела — це походження інформації, такі як книги або статті. Це важливо, але `introductory paragraph` вводить основні теми документа, а не просто перелічує джерела.
 
 ---
 
-To display complex charts and graphs
+Щоб відтворити складні діаграми та графіки
 
 ### --feedback--
 
-Charts and graphs are visual tools to present data. They may appear in a document, but the purpose of `introductory paragraph` is to introduce the topics, not display data visuals.
+Діаграми та графіки — це візуальні інструменти для представлення даних. Вони можуть з’являтися в документі, але мета `introductory paragraph` — ввести теми, а не показати візуальні дані.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa914bc44081a196fa6f7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa914bc44081a196fa6f7.md
index bc085562694..a8ae744ced4 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa914bc44081a196fa6f7.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa914bc44081a196fa6f7.md
@@ -1,49 +1,49 @@
 ---
 id: 65ffa914bc44081a196fa6f7
-title: Task 10
+title: Завдання 10
 challengeType: 19
 dashedName: task-10
 ---
 
 # --description--
 
-`To skim` means to read or look over something quickly to get the main ideas without focusing on the details. For example, `She skimmed the article to understand the general topic.`
+`Skim` означає швидко прочитати або переглянути щось, щоб отримати основні ідеї, не зосереджуючись на деталях. Наприклад, `She skimmed the article to understand the general topic`.
 
-`To skim through` is similar, meaning to quickly go through a text or document. Like, `He skimmed through the manual to find the troubleshooting section.`
+`Skim through` означає подібне: швидко переглянути текст або документ. Наприклад, `He skimmed through the manual to find the troubleshooting section`.
 
 # --question--
 
 ## --text--
 
-Why would someone `skim through` a technical document?
+З якою метою хтось `skim through` технічний документ?
 
 ## --answers--
 
-To understand every detail of the document
+Щоб зрозуміти кожну деталь документа
 
 ### --feedback--
 
-`Skimming` is not for understanding every detail but for quickly getting the main ideas or finding specific information.
+`Skimming` не для того, щоб зрозуміти кожну деталь, а для того, щоб швидко отримати основні ідеї або знайти конкретну інформацію.
 
 ---
 
-To quickly get the main ideas or find specific information
+Щоб швидко отримати основні ідеї або знайти конкретну інформацію
 
 ---
 
-To find grammatical errors
+Щоб знайти граматичні помилки
 
 ### --feedback--
 
-`Skimming` is more about understanding the overall content quickly, not for detailed error checking.
+`Skimming` більше про швидке розуміння загального змісту, а не перевірку помилок.
 
 ---
 
-To memorize the entire content
+Щоб запам’ятати весь зміст
 
 ### --feedback--
 
-`Skimming` is for a quick overview, not for in-depth study or memorization of the content.
+`Skimming` — це швидке ознайомлення, а не поглиблене вивчення або запам’ятовування змісту.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa9d80e7ffb1ab9b4df1c.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa9d80e7ffb1ab9b4df1c.md
index 6a48cfbb32b..c8e896d31e2 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa9d80e7ffb1ab9b4df1c.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65ffa9d80e7ffb1ab9b4df1c.md
@@ -1,6 +1,6 @@
 ---
 id: 65ffa9d80e7ffb1ab9b4df1c
-title: Task 11
+title: Завдання 11
 challengeType: 22
 dashedName: task-11
 ---
@@ -23,7 +23,7 @@ dashedName: task-11
 
 ### --feedback--
 
-It indicates that the action to follow happens as soon as the section is found. Capitalize this word.
+Це слово вказує, що дія відбудеться, як тільки розділ буде знайдено. Напишіть його з великої літери.
 
 ---
 
@@ -31,7 +31,7 @@ It indicates that the action to follow happens as soon as the section is found.
 
 ### --feedback--
 
-It's used here to mean locating or discovering the needed section in the documentation.
+Тут йдеться про пошук потрібного розділу в документації.
 
 ---
 
@@ -39,7 +39,7 @@ It's used here to mean locating or discovering the needed section in the documen
 
 ### --feedback--
 
-This word refers to the beginning paragraphs that provide a basic understanding of the section.
+Це слово стосується початкових абзаців, які надають базове розуміння розділу.
 
 ---
 
@@ -47,7 +47,7 @@ This word refers to the beginning paragraphs that provide a basic understanding
 
 ### --feedback--
 
-It means what the documentation includes or addresses in terms of content.
+Це слово означає, що документація розглядає певний зміст.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff2b49779301d9bdab6fa.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff2b49779301d9bdab6fa.md
index b6db01ada63..1274e3b1d98 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff2b49779301d9bdab6fa.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff2b49779301d9bdab6fa.md
@@ -1,6 +1,6 @@
 ---
 id: 65fff2b49779301d9bdab6fa
-title: Task 12
+title: Завдання 12
 challengeType: 19
 dashedName: task-12
 ---
@@ -15,35 +15,35 @@ dashedName: task-12
 
 ## --text--
 
-According to Sarah, what should you do once you find the section you need in the documentation?
+Що радить зробити Сара, якщо ви знайшли потрібний розділ у документації?
 
 ## --answers--
 
-Immediately start implementing the instructions
+Одразу почати виконувати інструкції
 
 ### --feedback--
 
-Sarah suggests reading the introductory paragraphs first to understand the section, not immediately implementing the instructions.
+Сара пропонує спочатку прочитати вступ, щоб зрозуміти про що розділ, а не одразу виконувати інструкції.
 
 ---
 
-Skip the introductory paragraphs and go to the main content
+Пропустити вступ та перейти до основного змісту
 
 ### --feedback--
 
-Sarah's advice is to start with the introductory paragraphs, not to skip them.
+Порада Сари полягає в тому, щоб почати з вступу, а не пропускати його.
 
 ---
 
-Begin by reading the introductory paragraphs for an overview of the section
+Для початку прочитати вступ, щоб ознайомитись з розділом
 
 ---
 
-Contact someone for help in understanding the section
+Звернутися за допомогою, щоб зрозуміти розділ
 
 ### --feedback--
 
-While asking for help can be useful, Sarah specifically advises reading the introductory paragraphs to get an overview.
+Хоча це може бути корисно, Сара конкретно радить прочитати вступ, щоб отримати загальне уявлення.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff336d7553c1df86f7968.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff336d7553c1df86f7968.md
index 2b92d8e91a8..333e1b3b87e 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff336d7553c1df86f7968.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff336d7553c1df86f7968.md
@@ -1,6 +1,6 @@
 ---
 id: 65fff336d7553c1df86f7968
-title: Task 13
+title: Завдання 13
 challengeType: 19
 dashedName: task-13
 ---
@@ -15,35 +15,35 @@ dashedName: task-13
 
 ## --text--
 
-What does Sarah recommend doing after reading the introductory paragraphs?
+Що Сара рекомендує зробити після прочитання вступу?
 
 ## --answers--
 
-Memorize every detail in the documentation
+Запам’ятати кожну деталь в документації
 
 ### --feedback--
 
-Sarah's suggestion is about skimming for relevance, not memorizing all details.
+Сара радить швидко переглянути зміст, щоб визначити потрібний матеріал, а не запам’ятовувати всі деталі.
 
 ---
 
-Skim through and focus on the parts relevant to the current task
+Швидко переглянути матеріал та зосередитися на тому, що стосується поточного завдання
 
 ---
 
-Rewrite the sections that are difficult to understand
+Переписати розділи, які важко зрозуміти
 
 ### --feedback--
 
-Sarah advises focusing on relevant parts, not rewriting difficult sections.
+Сара радить зосередитися на потрібних частинах, а не переписувати важкі розділи.
 
 ---
 
-Ignore the documentation and ask a colleague instead
+Проігнорувати документацію та запитати колегу замість цього
 
 ### --feedback--
 
-Sarah recommends skimming through the document and focusing on relevant parts, not avoiding the documentation.
+Сара рекомендує швидко переглянути матеріал і зосередитися на потрібних частинах, а не уникати документації.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff428290eaa1e5819c119.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff428290eaa1e5819c119.md
index 0525b579b48..7ee6405bbec 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff428290eaa1e5819c119.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff428290eaa1e5819c119.md
@@ -1,6 +1,6 @@
 ---
 id: 65fff428290eaa1e5819c119
-title: Task 14
+title: Завдання 14
 challengeType: 22
 dashedName: task-14
 ---
@@ -9,9 +9,9 @@ dashedName: task-14
 
 # --description--
 
-`Go over` means to review or examine something carefully. For example, `She decided to go over her notes before the exam.` It suggests a thorough look at something.
+`Go over` означає ретельно оглядати або перевіряти щось. Наприклад, `She decided to go over her notes before the exam`. Це передбачає ретельний огляд чогось.
 
-`As you said` is a phrase used to refer back to something someone mentioned. Like, `I completed the task as you said.`
+`As you said` — це фраза, яка використовується для звернення до того, про що хтось згадував. Наприклад, `I completed the task as you said`.
 
 # --fillInTheBlank--
 
@@ -25,7 +25,7 @@ dashedName: task-14
 
 ### --feedback--
 
-This word is part of a phrasal verb that means to review, examine, or study something carefully. Tom is planning to thoroughly review the documentation.
+Це слово є частиною фразового дієслова, яке означає «оглядати, перевіряти або ретельно вивчати щось». Том планує ретельно переглянути документацію.
 
 ---
 
@@ -33,7 +33,7 @@ This word is part of a phrasal verb that means to review, examine, or study some
 
 ### --feedback--
 
-It refers to something that was previously mentioned or advised by someone. Tom is acknowledging Sarah's suggested approach.
+Це стосується того, що було раніше згадано або рекомендовано. Том каже про запропонований Сарою підхід.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff57ce568cf1ed9702fbf.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff57ce568cf1ed9702fbf.md
index 8f1e94830c6..ced31499fa8 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff57ce568cf1ed9702fbf.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fff57ce568cf1ed9702fbf.md
@@ -1,6 +1,6 @@
 ---
 id: 65fff57ce568cf1ed9702fbf
-title: Task 15
+title: Завдання 15
 challengeType: 22
 dashedName: task-15
 ---
@@ -23,7 +23,7 @@ dashedName: task-15
 
 ### --feedback--
 
-It means something feels too much or too difficult to handle. Tom uses this word to describe his feeling towards the documentation.
+Це слово означає, що щось здається занадто складним або важким. Том використовує його, щоб описати свої відчуття щодо документації.
 
 ---
 
@@ -31,7 +31,7 @@ It means something feels too much or too difficult to handle. Tom uses this word
 
 ### --feedback--
 
-It means to feel anxious or troubled. Sarah tells Tom not to feel overwhelmed.
+Відчувати занепокоєння або стурбованість. Сара каже Тому, щоб він не переживав.
 
 ---
 
@@ -39,7 +39,7 @@ It means to feel anxious or troubled. Sarah tells Tom not to feel overwhelmed.
 
 ### --feedback--
 
-It's a list in a document or book used for finding specific information. Sarah suggests checking it for easier navigation.
+Список у документі або книзі, який використовується для пошуку конкретної інформації. Сара пропонує перевірити його для полегшення навігації.
 
 ---
 
@@ -47,7 +47,7 @@ It's a list in a document or book used for finding specific information. Sarah s
 
 ### --feedback--
 
-It refers to the beginning part that introduces the main content. Sarah advises reading these paragraphs first.
+Початкова частина, в якій представлено основний зміст. Сара радить спочатку прочитати цей текст.
 
 ---
 
@@ -55,7 +55,7 @@ It refers to the beginning part that introduces the main content. Sarah advises
 
 ### --feedback--
 
-It means what the documentation includes or addresses in terms of content. The introductory paragraphs help understand this.
+Це слово означає, що документація розглядає певний зміст. Вступ дозволяє зрозуміти, про що йдеться в документації.
 
 ---
 
@@ -63,7 +63,7 @@ It means what the documentation includes or addresses in terms of content. The i
 
 ### --feedback--
 
-It means to read or look over something quickly. Sarah recommends skimming to find relevant information.
+Швидко прочитати або переглянути щось. Сара рекомендує переглянути матеріал, щоб знайти потрібну інформацію.
 
 ---
 
@@ -71,7 +71,7 @@ It means to read or look over something quickly. Sarah recommends skimming to fi
 
 ### --feedback--
 
-It means directly relating to the topic or problem at hand. Tom should focus on the parts that are most pertinent to his task.
+Це слово означає безпосередній зв’язок з темою або проблемою. Том має зосередитися на частинах, які актуальні для його завдання.
 
 ---
 
@@ -79,7 +79,7 @@ It means directly relating to the topic or problem at hand. Tom should focus on
 
 ### --feedback--
 
-It's a part of a phrase meaning to review or examine something carefully. Tom agrees to follow Sarah's advice.
+Частина фрази, яка означає ретельно оглядати або перевіряти щось. Том обіцяє дотримуватися поради Сари.
 
 ---
 
@@ -87,7 +87,7 @@ It's a part of a phrase meaning to review or examine something carefully. Tom ag
 
 ### --feedback--
 
-It's part of a phrase used by Tom to acknowledge that he will follow the advice Sarah gave him.
+Частина фрази, яку використовує Том, щоб сказати, що він буде дотримуватися поради Сари.
 
 # --scene--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000a440c2f492ddee509f9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000a440c2f492ddee509f9.md
index 6e2e93e8210..be33e69c3d6 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000a440c2f492ddee509f9.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/66000a440c2f492ddee509f9.md
@@ -1,6 +1,6 @@
 ---
 id: 66000a440c2f492ddee509f9
-title: "Dialogue 2: Understanding Function Descriptions"
+title: "Діалог 2: як розуміти опис функцій"
 challengeType: 21
 dashedName: dialogue-2-understanding-function-descriptions
 ---
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662514383f43d53b748dff42.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662514383f43d53b748dff42.md
index 899bc7dfa50..9bfe961a313 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662514383f43d53b748dff42.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-request-and-receive-guidance/662514383f43d53b748dff42.md
@@ -23,7 +23,7 @@ He suggests outsourcing the optimization due to its complexity.
 
 ### --feedback--
 
-This option is incorrect. Brian's advice is about breaking down the function, not outsourcing.
+Це неправильна відповідь. Brian's advice is about breaking down the function, not outsourcing.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
index d6b2cb3a665..d508fc052c6 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
@@ -23,7 +23,7 @@ Starting a new project from scratch
 
 ### --feedback--
 
-This option is incorrect. Brian's focus is on updating existing documentation and improving customer support, not starting a new project.
+Це неправильна відповідь. Brian's focus is on updating existing documentation and improving customer support, not starting a new project.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
index 0921cb6bc17..63135bc4246 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
@@ -27,7 +27,7 @@ Because they are still considering other options
 
 ### --feedback--
 
-This option is incorrect. Brian's use of `will` indicates a decision has been made, not that they are still considering.
+Це неправильна відповідь. Brian's use of `will` indicates a decision has been made, not that they are still considering.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d803f9d4884e2a882a99.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d803f9d4884e2a882a99.md
index a247825db09..b8ad0029f3b 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d803f9d4884e2a882a99.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d803f9d4884e2a882a99.md
@@ -23,7 +23,7 @@ They need to review the project plans again for clarity.
 
 ### --feedback--
 
-This option is incorrect. `On the same page` implies that they already have clarity and agreement, not that they need further review.
+Це неправильна відповідь. `On the same page` implies that they already have clarity and agreement, not that they need further review.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614be98fc11336c52aa3093.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614be98fc11336c52aa3093.md
index 08e61863447..0e58e0d4877 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614be98fc11336c52aa3093.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614be98fc11336c52aa3093.md
@@ -31,7 +31,7 @@ Because it's a unique and innovative way to present
 
 ### --feedback--
 
-This option is incorrect. Bob suggests a slide deck because it's a standard, not a unique, format.
+Це неправильна відповідь. Bob suggests a slide deck because it's a standard, not a unique, format.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efee6946fda26f424c1a5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efee6946fda26f424c1a5.md
index e2ff33834d8..86f33e793d5 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efee6946fda26f424c1a5.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662efee6946fda26f424c1a5.md
@@ -23,7 +23,7 @@ She says she isn't working on much code at all.
 
 ### --feedback--
 
-This option is incorrect. Sarah actually indicates that she is working on a lot of code.
+Це неправильна відповідь. Sarah actually indicates that she is working on a lot of code.
 
 ---